How to properly display the checked attributes in another div with different styles?

mark :

I am very new to jQuery. The first part of the code is to check the inputs and after checked it should display the checked items the below format. How can do this with the help of jquery.

<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

After checked it should displays in this format.

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul class="approval approval_scrolltab mt-3">
    <li>
      <div class="approval--member">
        <img src="assets/images/user.jpg" class="user--image" />
        <div class="w-100">
          <h6 class="approval--name">Name</h6>
          <p>Initiator</p>
        </div>
        <a href="">
          <span class="ic-close"></span>
        </a>

      </div>
    </li>
  </ul>
</div>

I tried like this.It was working fine for the names but got no idea how can display this user image attached with name and also there is a cancel icon too near the name.I am only being able to display name with this code.

<script>
  $('input[type="checkbox"]').on('change', function () {
    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');

    if ($(this).prop('checked')) {
      $('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
      $('#checked-images').append("<img src='image'")
    } else {
      $('#checked-names p[data-name="' + name + '"]').remove();
      $('#checked-images').remove()
    }
  });
</script>

UPDATE With this close button I want to remove this from checked list(which works great) as well as I want to uncheck this from checked in input.

 $('body').on('click', '.ic-close', function() {
    $(this).closest('li').remove()
    $(this).closest('li').prop('checked',false) #didn't worked
  });

Robin Gillitzer :

This script below might be helpful for you. I only added an ID to the user-list and removed the a tag from the close button in your HTML. The JavaScript appends the HTML you wish with the name and the image to the list. If you click the close span, the item will be removed.

UPDATE: To uncheck the checkbox by closing its user-list item, you have to add an attribute like data-name="Initiator" to the checkbox. In the JavaScript if have added two lines into the click listener of the ic-close item, see below.

$('input[type="checkbox"]').on('change', function() {
  var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
  var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();

  if($(this).prop('checked')) {

    $('ul#user-list').append(
    '<li id="' + name + '">' +
      '<div class="approval--member">' +
        '<img src="' + image_url + '" class="user--image" />' +
        '<div class="w-100">' +
          '<h6 class="approval--name">Name</h6>' +
          '<p>' + name + '</p>' +
        '</div>' +
        '<span class="ic-close">Close</span>' +
      '</div>' +
    '</li>');

  } else {
    $('ul#user-list #' + name).remove();
  }

  $('body').on('click', '.ic-close', function() {
    var name = $(this).closest('li').find('.approval--name ~ p' ).text();
    $('input[data-name="' + name + '"]').prop( "checked", false );

    $(this).closest('li').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input data-name="Initiator" name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul id="user-list" class="approval approval_scrolltab mt-3">
  </ul>
</div>