After submit display checkbox values in div

Question

I am tried to display the checkbox values after submit or apply button. Can anybody help me with this. I want values to be displayed after submit button. particular column values display after particular column apply button is clicked. all the values should be in single div. This functionality is for filter.

(This will be done in back-end) after apply button the values on second column will change according to the checked values of first column. and so on.

$(':checkbox').on('change', function() {
    var $this = $(this);

    if (this.checked) {
        $('#results')
            .append('<li class="">' + $this.val() + '  <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
    } else {
        removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
    }
});

$(document).on('click', '.item', function() {
    removeCheckedResult($(this));
});

function removeCheckedResult($child) {
    $child.parent().remove();
    $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}

.container .hidden-menu{
  padding: 0;
  list-style: none;
}
.container .hidden-menu li{
  padding:10px 15px;
}
.container .hidden-menu li img{
  width:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
    </div>
  </div>
  <div class="container">
    <ul class="row hidden-menu clearfix" id="results">
    </ul>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 1

I hope it will help:

$(function() {
$(':checkbox').on('change', function() {
    /*var $this = $(this);

    if (this.checked) {
        $('#results')
            .append('<li class="">' + $this.val() + '  <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
            
            
            
    } else {
        removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
    }*/
});

$(document).on('click', '.item', function() {
    removeCheckedResult($(this));
});

function removeCheckedResult($child) {
    $child.parent().remove();
    $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
   
  $("button").on("click", function(e){
	 var arr =[];
     var arr1 =[];
     $("#results").html('');
   e.preventDefault();
   var count =  document.querySelectorAll("input:checked")
   for (i = 0; i < count.length; i++) {
    arr.push(count[i].value);
    arr1.push(count[i].getAttribute("data-ref"));
  }
    for (j = 0; j < arr.length; j++) {
    
     $("#results").append(`<li>`+arr[j]+`<a href="#" class="item" data-cb="` + arr1[j] + `"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a></li>`)
    }
   
   /*$(this).next("span").text(arr);*/

  })
})

.container .hidden-menu{
  padding: 0;
  list-style: none;
}
.container .hidden-menu li{
  padding:10px 15px;
}
.container .hidden-menu li img{
  width:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test22" data-ref="2">test2<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test33" data-ref="3">test3<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test44" data-ref="4">test4<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test55" data-ref="5">test5<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
    </div>
  </div>
  <div class="container">
    <ul class="row hidden-menu clearfix" id="results">
    </ul>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>