Display Checkbox values after submit button

Question

I am trying to implement a filter. When a checkbox is checked, and after submitting, the checked values should display in the div with a Clear all button and an X button to remove separately, as shown in the image.

Can anybody help me.

$(document).ready(function() {
  $('#showmenu').click(function() {
    $('.menu').show("slide");
  });
});

jQuery(document).ready(function(e) {
  function t(t) {
    e(t).bind("click", function(t) {
      t.preventDefault();
      e(this).parent().fadeOut()
    })
  }
  e(".dropdown-toggle").click(function() {
    var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
    e(".button-dropdown .dropdown-menu").hide();
    e(".button-dropdown .dropdown-toggle").removeClass("active");
    if (t) {
      e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
    }
  });
  e(document).bind("click", function(t) {
    var n = e(t.target);
    if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
  });
  e(document).bind("click", function(t) {
    var n = e(t.target);
    if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
  })
});

/******************************************/

$(function() {

  $('input[type="checkbox"]').click(
    function() {
      // if($(this).is(":checked")){
      //        $("#div ul").append("<li> value <a href='javascript:void(0);' class='remove'>&times;</a></li>"); 
      //    }

      value = $(this).val();
      if ($(this).is(':checked')) {
        $('<li></li>').appendTo('#div ol').text($(this).val());
      } else {
        value = $(this).val();
        if ($('#div ol').has('li:contains("' + value + '")')) {
          $('#div ol li:contains("' + value + '")').remove();
        }
      }
    });
});


/******************************************/
/******************************************/

.filter-section .container {
  margin-right: 100px;
  margin-left: 100px;
  padding: 0px;
  height: 24px;
}

.filter-section #showmenu {
  margin: 0px;
  margin-right: 34px;
}

.filter-section #showmenu p {
  color: #3f3f3f;
  font-size: 18px;
  font-weight: 600px;
  margin: 0px;
  padding: 0px;
}

.filter-section .menu .nav {
  border-left: 1px solid #3f3f3f;
}

.filter-section .nav {
  display: block;
  margin: 0;
  padding: 0;
  height: 24px;
}

.filter-section .nav li {
  display: inline-block;
  list-style: none;
}

.filter-section .menu .nav .button-dropdown {
  position: relative;
  margin-left: 24px;
  height: 24px;
}

.filter-section .menu .nav li a {
  color: #000;
  background-color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.filter-section .menu .nav li a span {
  font-size: 26px;
  line-height: 0;
  height: 24px;
  margin-right: 10px;
}

.filter-section .menu .nav li .dropdown-toggle::after {
  display: inline-block;
  margin-left: 12px;
  vertical-align: 2px;
  content: "";
  border-top: 6px solid;
  border-right: 3px solid transparent;
  border-bottom: 0;
  border-left: 3px solid transparent;
}

.filter-section .menu .nav li .dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
  margin-top: 0px;
  margin-left: 22px;
  text-align: left;
  width: 224px;
  padding: 10px 24px;
}

.filter-section .menu .nav li .dropdown-menu div {
  border-bottom: 1px solid #000;
}

.filter-section .menu .nav li .dropdown-menu div:last-child {
  border-bottom: none;
  padding-bottom: 10px;
  padding-top: 20px;
}

.filter-section .menu .nav li .dropdown-menu.active {
  display: block;
}


/*.nav li .dropdown-menu a {
     width: 150px;
 }*/


/****************************************/

.listofslect {
  padding: 0px;
}

.listofslect li {
  padding: 10px;
  font-size: 14px;
  display: inline-block;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.name {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  margin: 0;
  padding-bottom: 14px;
  padding-top: 10px;
}

.name input {
  margin-right: 12px;
}

.button {
  border: none;
  color: white;
  padding: 14px 0px;
  text-align: center;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
  border-radius: 4px;
  background-color: #000000;
}

button:focus {
  outline: 0px dotted;
  outline: 0px auto -webkit-focus-ring-color;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
  <div class="filter-section">
    <div class="container d-flex">
      <div id="showmenu">
        <p> <img src="images/hamburger-icon-open.png"> Filter</p>
      </div>
      <div class="menu" style="display: none;">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Learning Modes</a>
            <div class="dropdown-menu">
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="Self paced"/>Self paced</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="Classroom"/>Classroom</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="Live Virtual-Classroom"/>Live Virtual Classroom</label>
              </div>
              <div class="">
                <button class="button">Apply</button>
              </div>
            </div>
          </li>
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Level</a>
            <div class="dropdown-menu">
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="ABC"/>ABC</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="DEF"/>DEF</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="GHI"/>GHI</label>
              </div>
              <div class="">
                <button class="button">Apply</button>
              </div>
            </div>
          </li>
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Role</a>
            <div class="dropdown-menu">
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="JKL"/>JKL</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="MNO"/>MNO</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="PQR"/>PQR</label>
              </div>
              <div class="">
                <button class="button">Apply</button>
              </div>
            </div>
          </li>
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Skills</a>
            <div class="dropdown-menu">
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="STU"/>STU</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="VWX"/>VWX</label>
              </div>
              <div class="">
                <label class="name"><input type="checkbox" class="" id="checkbox4" value="YZ"/>YZ</label>
              </div>
              <div class="">
                <button class="button">Apply</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="container" id="div">
      <ol class="listofslect"></ol>
    </div>
  </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>

The jsFiddle and Codepen code is attached.

Answer 1

I found a way to fix this issue thanks to this link, that explains how to get the checkbox values. This solution works with an array, So to fix your issue, you need below code to print every element checked on the submit event.

var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
   values.push($(this).val());
});

Answer 2

I have got the solution.

Please go through the code for reference. View in full page.

the codepen and jsfiddle snippets

// Onclick Filter Slide Right Script Starts
$(document).ready(function() {
    $('#showmenu').click(function() {
        $('.menu').show("slide");
    });
});
// Onclick Filter Slide Right Script Ends

// Onclick Dropdown Script Starts Starts
jQuery(document).ready(function(e) {
    function t(t) {
        e(t).bind("click", function(t) {
            t.preventDefault();
            e(this).parent().fadeOut()
        })
    }
    e(".dropdown-toggle").click(function() {
        var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
        e(".button-dropdown .dropdown-menu").hide();
        e(".button-dropdown .dropdown-toggle").removeClass("active");
        if (t) {
            e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
        }
    });
    e(document).bind("click", function(t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
    });
    e(document).bind("click", function(t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
    })
});
// Onclick Dropdown Script Starts Ends

// Onclick Checkbox Display in div and Vice-Varsa Script Starts


// $(':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="images/close-button.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');
// }



$(function() {

$(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>')
    }
  })
})



// Onclick Checkbox Display in div and Vice-Varsa Script Ends


$(document).ready(function() {
  $('#show-hidden-menu, #show-hidden-menu1, #show-hidden-menu2, #show-hidden-menu3').click(function() {
    $('.hidden-menu').show("slow");
    // Alternative animation for example
    // slideToggle("fast");
  });
});

$(document).ready(function(){
  $(".mode-apply-btn").click(function(){
    $(".mode-sec span").css("color", "#26d400");
  });
  $(".level-apply-btn").click(function(){
    $(".level-sec span").css("color", "#26d400");
  });
  $(".role-apply-btn").click(function(){
    $(".role-sec span").css("color", "#26d400");
  });
  $(".skills-apply-btn").click(function(){
    $(".skills-sec span").css("color", "#26d400");
  });
  $(".button").click(function(){
    $(".clear-all").css("display", "inline-block");
  });
});


$(".dropdown-menu input:checkbox").on("change", function() {
        var len = $(".dropdown-menu input[type='checkbox']:checked").length;
        if(len>0)
        {
            $("#general .counter").text('('+len+')');
        }
        else
        {
            $("#general .counter").text(' ');
        }
    });


    $('#filter-submenu').find('.clear-all').prependTo('.hidden-menu>li:last');

    // $('.hidden-menu > .clear-all').prepend("");


    $('.clear-all').on('click', function () {
        $('#filter-submenu').empty();
        $('.menu .dropdown-menu div input').prop('checked', false);
        $(".mode-sec span").css("color", "#fff");
        $(".level-sec span").css("color", "#fff");
        $(".skills-sec span").css("color", "#fff");
        $(".role-sec span").css("color", "#fff");
    });

.filter-section {
    margin-top: 40px;
    margin-bottom: 40px;
}
.filter-section .container {
    margin-right: 100px;
    margin-left: 100px;
    padding: 0px;
}

.filter-section #showmenu {
    margin: 0px;
    margin-right: 34px;
    margin-bottom: 25px;
}

.filter-section #showmenu a {
    color: #3f3f3f;
    width: 102px;
    font-size: 18px;
    font-weight: 600;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}
.filter-section #showmenu a img{
    width:35px
}

.filter-section .menu {
    margin-bottom: 25px;
    display: none;
}

.filter-section .menu .nav {
    border-left: 1px solid #3f3f3f;
}

.filter-section .nav {
    display: block;
    margin: 0;
    padding: 0;
    height: 24px;
}

.filter-section .nav li {
    display: inline-block;
    list-style: none;
}

.filter-section .menu .nav .button-dropdown {
    position: relative;
    margin-left: 24px;
    height: 24px;
}

.filter-section .menu .nav li a {
    color: #000;
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}



.filter-section .menu .nav li a span {
    font-size: 26px;
    line-height: 0;
    height: 24px;
    margin-right: 10px;
    color: #fff;
}

.filter-section .menu .nav li .dropdown-toggle::after {
    display: inline-block;
    margin-left: 12px;
    vertical-align: 2px;
    content: "";
    border-top: 6px solid;
    border-right: 3px solid transparent;
    border-bottom: 0;
    border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu .dropdown-toggle::after {
    display: none;
    margin-left: 12px;
    vertical-align: 2px;
    content: "";
    border-top: 6px solid;
    border-right: 3px solid transparent;
    border-bottom: 0;
    border-left: 3px solid transparent;
}

.filter-section .menu .nav li .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-left: 22px;
    text-align: left;
    width: 224px;
    padding: 10px 24px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}

.filter-section .menu .nav li .dropdown-menu div {
    border-bottom: 1px solid #000;
    padding: 12px 0px;
}
.filter-section .menu .nav li .dropdown-menu div:nth-last-child(2) {
    border-bottom: none;
}

.filter-section .menu .nav li .dropdown-menu div:last-child {
    border-bottom: none;
    padding-bottom: 10px;
    padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu div label {
    margin-bottom: 0px;
    line-height: 0px;
}

.filter-section .menu .nav li .dropdown-menu.active {
    display: block;
}

.hidden-menu {
    display: none;
}

/****************************************/
.listofslect {
    padding: 0px;
}

.listofslect li {
    padding: 10px;
    font-size: 14px;
    display: inline-block;
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.name {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    padding-bottom: 14px;
    padding-top: 10px;
}

.name input {
    margin-right: 12px;
}

.button {
    border: none;
    color: white;
    padding: 14px 0px;
    text-align: center;
    font-size: 16px;
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
    background-color: #000000;
}

button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}

/**********************************************/

.filter-section #results{
    display: none;
}
.filter-section .hidden-menu {
    list-style: none;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    margin-bottom: 25px;
}

.filter-section .hidden-menu li {
    padding: 16px 15px;
    margin: 0px;
    line-height: 0px;
    margin-right: 16px;
    margin-bottom: 16px;
    float:left;
    border-radius: 4px;
    border: solid 1px #ECECEC;
    background-color: #ECECEC;
}

.filter-section .hidden-menu li a img {
    margin-left: 15px;
    width: 10px;
}

.filter-section  .clear-all{
    padding: 8px 0px;
    border: none;
    background: #fff;
    display:none;
}

.filter-section  .clear-all a{
    color: #26d400;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

/****************************/
/* Hide the browser's default checkbox */
/*label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}*/

/*label input{
    margin-right: 12px;
}*/
/* Create a custom checkbox */
/*.checkmark {
    position: absolute;
    top: 15px;
    left: 23px;
    height: 13px;
    width: 13px;
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid;
    border-radius: 0px;
}*/

/* On mouse-over, add a grey background color */
/*label:hover input ~ .checkmark {
  background-color: #fff;
}*/

/* When the checkbox is checked, add a blue background */
/*label input:checked ~ .checkmark {
  background-color: #000;
}
*/
/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}*/

/* Show the checkmark when checked */
/*label input:checked ~ .checkmark:after {
  display: block;
}*/

/* Style the checkmark/indicator */
/*label .checkmark:after {
    left: 4px;
    top: 0px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
}*/


.nav .button-dropdown .dropdown-menu label
{
    display:block
}
.nav .button-dropdown .dropdown-menu input[type="checkbox"]
{
    position:relative;
    top:0px;
    margin-right:12px;
    -moz-appearance:none;
    background-color:#dddddd!important;
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:after
{
    content:"";
    vertical-align:middle;
    -webkit-appearance:none!important;
    -moz-appearance:none!important;
    appearance:none!important;
    background-color:#fff!important;
    border: 1px solid #000;
    color:#fff;
    text-align:center;
    line-height:15px;
    position:absolute;
    cursor:pointer;
    height:15px;
    width:15px;
    left:0;top:0;
    font-size:11px;
    background:#fff
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:checked:after
{
    background:#000;
    /*content:'\f00c';*/
    content: url(images/left-arrow-icon.png);
    color:#000;
    -webkit-appearance:none!important;
    -moz-appearance:none!important;
    background-color:#000!important;
    color:#fff;
    font-family:FontAwesome
}

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

<section>
    <div class="filter-section">
        <div class="container d-flex">
            <div id="showmenu">
                <a id="general"> <img src="https://i.dlpng.com/static/png/5460626-filter-filtering-filters-icon-with-png-and-vector-format-for-filter-png-512_512_preview.png"> Filter <span class="counter"></span></a>
            </div>
            <div class="menu">
                <ul class="nav">
                    <li class="button-dropdown">
                        <a href="javascript:void(0)" class="mode-sec dropdown-toggle"><span>&#8226;</span>Learning Modes</a>
                        <div class="dropdown-menu">
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test" data-ref="1">test<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
                            </div>
                            <div class="">
                                <button class="button dropdown-toggle mode-apply-btn"  id="show-hidden-menu">Apply</button>
                            </div>
                        </div>
                    </li>
                    <li class="button-dropdown">
                        <a href="javascript:void(0)" class="level-sec dropdown-toggle"><span>&#8226;</span>Level</a>
                        <div class="dropdown-menu">
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
                            </div>
                            <div class="">
                                <button class="button dropdown-toggle level-apply-btn" id="show-hidden-menu1">Apply</button>
                            </div>
                        </div>
                    </li>
                    <li class="button-dropdown">
                        <a href="javascript:void(0)" class="role-sec dropdown-toggle"><span>&#8226;</span>Role</a>
                        <div class="dropdown-menu">
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test14" data-ref="14">test14<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test15" data-ref="15">test15<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test16" data-ref="16">test16<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test17" data-ref="17">test17<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test18" data-ref="18">test18<span class="checkmark"></span></label>
                            </div>
                            <div class="">
                                <button class="button dropdown-toggle role-apply-btn" id="show-hidden-menu2">Apply</button>
                            </div>
                        </div>
                    </li>
                    <li class="button-dropdown">
                        <a href="javascript:void(0)" class="skills-sec dropdown-toggle"><span>&#8226;</span>Skills</a>
                        <div class="dropdown-menu">
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test19" data-ref="19">test19<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test20" data-ref="20">test20<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test21" data-ref="21">test21<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test22" data-ref="22">test22<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test23" data-ref="23">test23<span class="checkmark"></span></label>
                            </div>
                            <div>
                                <label><input type="checkbox" class="mainlist" value="test24" data-ref="24">test24<span class="checkmark"></span></label>
                            </div>
                            <div class="" >
                                <button class="button dropdown-toggle skills-apply-btn" id="show-hidden-menu3">Apply</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container d-flex" id="filter-submenu">
            <ul class="hidden-menu clearfix" id="results">
                
            </ul>
            <a id="clear-all-btn" class="col-1 clear-all">Clear all</a>
        </div>
    </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>