Отображать значения флажков после кнопки отправки

Question

Я пытаюсь реализовать фильтр. Если флажок установлен и после отправки отмеченные значения должны отображаться в элементе div с помощью кнопки Clear all и кнопки X для удаления по отдельности, как показано на рисунке.

Кто-нибудь может мне помочь.

$(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>

Код jsFiddle и Codepen прилагается.

Answer 1

Я нашел способ исправить эту проблему благодаря этой ссылке , которая объясняет, как получить значения флажков. Это решение работает с массивом, поэтому для решения вашей проблемы вам понадобится код ниже, чтобы напечатать каждый элемент, отмеченный в событии submit.

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

Answer 2

У меня есть решение.

Пожалуйста, go через код для справки. Посмотреть на полной странице.

codepen и jsfiddle фрагменты

// 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>