How can I update the other select2 selectbox value based on the value of a select2 selectbox?

I tried it like this but it didn’t work. How can I do that?

• Do not show category option unless Type is selected
• 1 time selection for both selectboxes (without removing multiple)

$("#clct, #cyc").select2({
    //maximumSelectionLength: 1,
});


// Select step by step for homepage
$('#clct').on('change', function() {
  var selected = $(this).val();
  $("#cyc option").each(function(item){
    console.log(selected) ;  
    var element =  $(this) ; 
    console.log(element.data("tag")) ; 
    if (element.data("tag") != selected){
      element.hide() ; 
    }else{
      element.show();
    }
  }) ; 
  
  $("#cyc").val($("#cyc option:visible:first").val());
  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select name="bt" id="clct" class="clct input--style-1" data-placeholder="All Types" multiple>
<option value="1">TypeA</option>
      <option value="2">TypeB</option>
      <option value="3">TypeC</option>
      <option value="4">TypeD</option>
</select>

<select name="yc" id="cyc" data-placeholder="Please select type" multiple>
    <option  value="1" data-tag="1">CategoryA</option>
    <option  value="2" data-tag="1">CategoryB</option>
    <option  value="3" data-tag="1">CategoryC</option>
    <option  value="4" data-tag="1">CategoryD</option>
    <option  value="5" data-tag="1">CategoryE</option>
    <option  value="0" data-tag="2">CategoryF</option>
    <option  value="0" data-tag="3">CategoryG</option>
    <option  value="0" data-tag="4">CategoryH</option>
</select>

Answer

var clct = $("#clct").select2({
    maximumSelectionLength: 1
});
var cyc = $("#cyc").select2({
    maximumSelectionLength: 1
});

var selectClone = cyc.clone();
cyc.find("option").remove();


$('#clct').on('change', function() {
var arr=$(this).val();
cyc.find("option").remove();


  if (arr.indexOf("1")>-1){
    let opts = selectClone.find('option[data-tag="1"]').clone();
    cyc.append(opts);
  }
  if (arr.indexOf("2")>-1){
    let opts = selectClone.find('option[data-tag="2"]').clone();
    cyc.append(opts);
  }
  if (arr.indexOf("3")>-1){
    let opts = selectClone.find('option[data-tag="3"]').clone();
    cyc.append(opts);
  }

  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select name="bt" id="clct" class="clct input--style-1" data-placeholder="All Types" multiple>
<option value="1">TypeA</option>
      <option value="2">TypeB</option>
      <option value="3">TypeC</option>
      <option value="4">TypeD</option>
</select>

<select name="yc" id="cyc" data-placeholder="Please select type" multiple>
    <option  value="1" data-tag="1">CategoryA</option>
    <option  value="2" data-tag="1">CategoryB</option>
    <option  value="3" data-tag="1">CategoryC</option>
    <option  value="4" data-tag="1">CategoryD</option>
    <option  value="5" data-tag="1">CategoryE</option>
    <option  value="0" data-tag="2">CategoryF</option>
    <option  value="0" data-tag="3">CategoryG</option>
    <option  value="0" data-tag="4">CategoryH</option>
</select>