$(function () {

    $(`#selectable`).bind("mousedown", function (e) {
        e.metaKey = true;
    }).selectable({
        selected: function (event, ui) {
            //For toggling between select clicks
            if ($(ui.selected).hasClass('click-selected'))
                $(ui.selected).removeClass('ui-selected click-selected');
            else {
                //case when no Item is selected on your list
                let noItemIsSelected = !$(".ui-widget-content").hasClass('click-selected');
                //Case when on of neighbor's Item selected
                let oneOfNeighborsIsSelected = $(ui.selected).next().hasClass('click-selected') || $(ui.selected).prev().hasClass('click-selected');

                if (noItemIsSelected || oneOfNeighborsIsSelected) {


                    $(ui.selected).addClass('click-selected');
                    console.log(ui.selected.innerText);

                    let selectedID = ui.selected.id;

                    console.log(event);
                    $("#select-result").append(ui.selected.innerText);
                } else {
                    $(ui.selected).removeClass('ui-selected click-selected');
                }
            }
        },
        unselected: function (event, ui) {
            $(ui.unselected).removeClass('ui-selected click-selected');
        }
    });
});