выпадающий список на jQuery с checkBox

Помогите реализовать идею, второй день бьюсь. Нужно реализовать выпадающий список из checkbox и при выборе, значения должно отображаться в input, а при снятии, удаляться.

Реализовал вот так, вроде работает, но если поставить несколько инпутов, то в итоге при клине на одном, выпадают списки у всех, и если черкнуть, то прикидываться количество значений чекетов на все инпуты

<div class="col-3" id="col1">
                  <div class="headVolumeGroup" id="headVolumeGroup1">
                    <input class="effect-1" data-parameter="1"  data-id="volumeGroupsStringReturnException1"
                           type="text" autocomplete="off"
                           id="volumeGroupsStringReturnException1"  />
                    <span class="focus-border"></span>
                    <p class="multiSel" id="multiSel1" hidden></p>
                  </div>
                  <div class="listVolumeGroup" id="listVolumeGroup1">
                    <div class="mutliSelect" id="mutliSelect1">
                      <ul>
                        <li>
                          <input type="checkbox" value="120" />120</li>
                        <li>
                          <input type="checkbox" value="138" />138</li>
                        <li>
                          <input type="checkbox" value="150" />150</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="col-3" id="col2">
                  <div class="headVolumeGroup" id="headVolumeGroup2">
                    <input class="effect-1" data-parameter="2" data-id="volumeGroupsStringReturnException2"
                           type="text" autocomplete="off"
                           id="volumeGroupsStringReturnException2"  />
                    <span class="focus-border"></span>
                    <p class="multiSel" id="multiSel2" hidden></p>
                  </div>
                  <div class="listVolumeGroup" id="listVolumeGroup2">
                    <div class="mutliSelect" id="mutliSelect2">
                      <ul>
                        <li>
                          <input type="checkbox" value="120" />120</li>
                        <li>
                          <input type="checkbox" value="138" />138</li>
                        <li>
                          <input type="checkbox" value="150" />150</li>
                      </ul>
                    </div>
                  </div>
                </div>

и сам JS

$(document).ready(function(){
$(".col-3 .headVolumeGroup input").on('click', function() {
  $(".col-3 .listVolumeGroup ul").slideToggle('fast');
});
$(document).bind("click", function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("col-3"))
    $(".col-3 .listVolumeGroup 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>";
  $(".multiSel").append(html);
  var val = $(".multiSel").text();
   $(".col-3 .headVolumeGroup input").val(val);
} else {
  $('span[title="' + title + '"]').remove();
  var val = $(".multiSel").text();
  $(".col-3 .headVolumeGroup input").val(val);
}
});
}); 

пытался атрибутами прикидывать нужный id и некий num, далее слеплять, чтобы в итоге брался у каждого свой инпут. Но в итоге переменными не удалось прокинуть значения.

Вот так

$(document).ready(function(){
var element;
var id;
 $(".col-3 .headVolumeGroup input").on('click', function() {
    id = this.getAttribute("data-parameter"); 
    element = this.getAttribute("data-id"); 
  $("#col" + id + " #listVolumeGroup" + id + " ul").slideToggle("fast");
 });
 $(document).bind("click", function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("col-3"))
  $("#col" + id + " #listVolumeGroup" + id + " ul").hide();
 });
 $('#mutliSelect' + id + ' input[type="checkbox"]').on("click",    function() {
var title = $(this)
    .closest("#mutliSelect" + id)
    .find('input[type="checkbox"]')
    .val(),
  title = $(this).val() + ",";
if ($(this).is(":checked")) {
  var html = '<span title="' + title + '">' + title + "</span>";
  $("#multiSel" + id).append(html);
  var val = $("#multiSel" + id).text();
  $("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val);
} else {
  $('span[title="' + title + '"]').remove();
  var val = $("#multiSel" + id).text();
  console.log(element);
  $("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val);
}
});
});

Естественно не сработало как нужно.

Помогите плиз, сам пока на начальных этапах в изучении jQuery. На js смог сделать, но хотелось бы понять, как это на jQuery.