No item is added to multiselect. [closed]

$(".filterDropdown dt a").on('click', function() { $(".filterDropdown dd ul").slideToggle('fast'); }); $(".filterDropdown dd ul li a").on('click', function() { $(".filterDropdown dd ul").hide(); }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide(); }); $('.mutliselect input[type="checkbox"]').on('click', function() { var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(), title = $(this).val() + ","; if ($(this).is(':checked')) { var html = '<span title="' + title + '">' + title + '</span>'; $('.resultSelect').append(html); $(".resultFilter").hide(); } else { $('span[title="' + title + '"]').remove(); var ret = $(".resultFilter"); $('.filterDropdown dt a').append(ret); } }); 

 .filters { width: 270px; height: 100%; background-color:#fff; border-right: 1px solid #f7f7f7; position: relative; } .filterDropdown { position: absolute; top:30px; left: 80px; transform: translate(-50%); } .filterDropdown a { color:#5795f9; } .filterDropdown dd, .filterDropdown dt { margin: 0px; padding: 0px; } .filterDropdown ul { margin: -1px 0 0 0; } .filterDropdown dd { position: relative; } .filterDropdown a, .filterDropdown a:visited { color: #5795f9; text-decoration: none; outline: none; font-size: 12px; } .filterDropdown dt a { background-color: #fff; display: block; padding: 8px 20px 5px 10px; min-height: 15px; line-height: 24px; overflow: hidden; border: 0; width: 152px; border:1px solid black; } .filterDropdown dt a span, .resultSelect span { cursor: pointer; display: inline-block; color: #000; padding: 0 6px 2px 0; } .filterDropdown dd ul { background-color: #fff; border: 0; color: #5795f9; display: none; left: 0px; padding: 2px 15px 2px 5px; position: absolute; top: 2px; width: 180px; border:1px solid black; list-style: none; height: 100px; overflow: auto; } .filterDropdown span.value { display: none; } .filterDropdown dd ul li a { padding: 5px; display: block; } .filterDropdown dd ul li a:hover { background-color: #5795f9; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <dl class = "filterDropdown"> <dt> <a href="#"> <span class = "resultFilter"></span> <span class = "resultFilterNew"></span> <p class = "resultSelect"></p> </a> </dt> <dd> <div class = "multiselect"> <ul> <li><input type="checkbox" value="Kyiv">Kyiv</li> <li><input type="checkbox" value="Kharkiv">Kharkiv</li> <li><input type="checkbox" value="Lviv">Lviv</li> </ul> </div> </dd> </dl>