Display Checkbox values after submit button

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.