How To Properly Display The Checked Attributes In Another Div With Different Styles?

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

Solution 1:

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();
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ulclass="approval approval_scrolltab mt-3"><li><divclass="approval--member"><imgsrc="assets/images/user.jpg"class="user--image" /><divclass="w-100"><h6class="approval--name">Name</h6><p>Initiator</p></div><divclass="form-group"><divclass="checkbox"><inputdata-name="Initiator"name="one"type="checkbox"id="one" /><labelfor="one"></label></div></div></div></li></ul><divclass="col-xl-6 col-lg-6 col-md-6 offset-xl-1"><h6class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6><ulid="user-list"class="approval approval_scrolltab mt-3"></ul></div>

Solution 2:

Simply check if you really need jQuery, in 2020 the pure Javascript have the majority of the jQuery fonctions : http://youmightnotneedjquery.com/

You can get the checked attribute via an event like this :

var checkbox = document.querySelector('[type="checkbox"]');

// Event Listener:
checkbox.addEventListener('change', function(event) {
    alert(event.target.checked);
    if(event.target.checked) {
        // Do want do you want when checked
    }
});

I don't understand very well what you expected but I hope that it could help you.