Need to create autocomplete with master and multiselect checkbox

Problem 1-I have created autocomplete with multiselect checkbox but not able to check all the checkbox on click of some other checkbox which is not part of that autocomplete-multiselect-checkbox.

Problem 2:- whenever selection of checkbox of autocomplete-multiselect-checkbox need to populate some other autocomplete-multiselect-checkbox dynamically .

Example:Region and Country both are autocomplete-multiselect-checkbox Region A is having -(Country)1,2,3 Region B is having -(Country)4,5,6

if Region B checkbox is check then in Country autocomplete it should show 4,5,6 with checkbox.

For Problem 1: below is the HTML:

<input id="multiUsers" class="col-lg-8 multiselect-element w3-input inline" type="text" placeholder="search"></input>

below is the JS:

 var userData = [
     "ActionScript",
     "AppleScript",
     "Asp",
     "BASIC",
     "C++",
     "Clojure",
     "COBOL",
     "ColdFusion"
];
function split(val) {
    return val.split(/,\s*/);
}
function bindUsersAutoComplete(ele, options) {
    var text = ele.val();
    text = text == null || text == undefined ? "" : text;
    $(ele).autocomplete(options).data("ui-autocomplete")._renderItem = function (ul, item) {
    var checked = (text.indexOf(item.label + ', ') > -1 ? 'checked' : '');
    return $("<li></li>")
      .data("ui-autocomplete-item", item)
      .append('<a href="javascript:;"><input type="checkbox" class="checkBoxClass"' + checked + '/>' + item.label + '</a>')
      .appendTo(ul);
    };
}

$(function () {
  var $this;
  var multiSelectOptions = {
      minLength: 0,
      source: function (request, response) {
            response($.map(userData, function (item) {
            return {
                label: item
            }
        }));
      },
    select: function (event, ui) {
        var text = $this.val();
        text = text == null || text == undefined ? "" : text;
        var checked = (text.indexOf(ui.item.value + ', ') > -1 ? 'checked' : '');
        if (checked == 'checked') {
          this.value = this.value.replace(ui.item.value + ', ', '')
        }
         else {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push(ui.item.value);
          // add placeholder to get the comma-and-space at the end
          terms.push("");
          this.value = terms.join(", ");
        }           
        return false; 
    }
}

  $(document).find('#multiUsers').on('keydown', function () {
      bindUsersAutoComplete($this, multiSelectOptions);
    $($this).autocomplete("search");
    }).on('focus', function () {
        $this = $(this);
        bindUsersAutoComplete($this, multiSelectOptions);
        $($this).autocomplete("search");
    }) 
  })