从3个下拉菜单更改最后一个下拉菜单后，将完全复制所有3个下拉菜单的副本，而没有第一个下拉菜单值

Question

以下是我的3下拉部分。我想在第3下拉菜单中更改其值为AND / OR。更改下拉列表后，将会出现所有这三个相同下拉列表的另一个克隆，并且条件仅在“第一选择字段”的“克隆”部分中，不应存在先前选择的值（如果我首先选择“类别”选择，然后在“克隆”部分的“首先选择”字段中将没有“类别”部分。

此外，根据第一个选择，还有3个选项值，分别是（类别，流派和类型转换），因此，在更改AND / OR部分时，我们只能克隆2个div，但第一个除外。

此外，如果我们已经在第一部分中选择了“类别”部分，然后选择“与/或”选项字段，则其他两个选项将从第一个选择字段中消失。同样，它会像这样

我有一些克隆方法，但是不能完全满足我们的要求。下面是我的HTML和js代码。

**HTML**

<div class="radio">
<input type="radio" id="test2" name="specific_content" value="2">
<label for="test2">
<div class="col-md-4">
    <select class="form-control" id="content-form" name="content_form">
        <option selected disabled hidden>Select</option>
        <option value="category">Category</option>
        <option value="genre">Genre</option>
        <option value="cast">Cast</option>
    </select>
</div>
<div class="col-md-4">
    <select class="form-control content-type-section" id="content_type" name="content_type" disabled="disabled" onchange="removeDisableFromCondition(this)">
        <option selected disabled hidden>Select</option>
        <option value="123">Movie</option>
        <option value="321">TV</option>
        <option value="345">Cast</option>
        <option value="987">Genre</option>
    </select>
</div>
<div class="col-md-4">
    <select class="form-control condition-section" id="sel1" name="conditions" disabled="disabled" onchange="showAnotherSection()">
        <option selected disabled hidden>Select</option>
        <option value="1">AND</option>
        <option value="2">OR</option>                                
    </select>
</div>
<div id="cloned_copy">

</div>

JS

$(document).ready(function() {
    $('#sel1').change(function() {
     var selectedVal = $('#content-form').val();     
     var target = $("#cloned_copy");
     target.empty();
       $("#content-form").clone().appendTo(target);
     $("#cloned_copy option[value='"+ selectedVal +"']").remove();
  });
});

After choosing AND/OR select drop down