当我克隆新元素时，jQuery不起作用

Question

当我单击“添加”按钮时，应将新元素克隆到底部，并可以基于选择值显示/隐藏输入字段。但是现在，当克隆时，新元素无法像第一个元素那样显示/隐藏输入字段。

这是我的代码。

$("#filter_option").change(function() {
    let elem;
    let val = $("#filter_option").val();
    if (val == 1) {
        elem = $("#boxes .position_value").clone();
    } else if (val == 2) {
        elem = $("#boxes .salary_value").clone();
    } else {
        return;
    }
    $("#container").append(elem);
    elem.show();
});

$(".position_value").hide();
$(".salary_value").hide();

$("#add").click(function() { //when user clicks add
    let elem;
    elem = $("#filter_option").clone();
    $("#big_container").append(elem);
    elem.show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-sm" name="filter_option" id="filter_option">
  <option disabled="" selected="">Select a filter</option>
  <option value="1">Position</option>
  <option value="2">Salary</option>
</select>
<div id="container">

</div>
<div id="big_container">

</div>
<button id="add">ADD</button>
<div id="boxes">
  <!-- POSITION -->
  <div class="position_value">

    <select class="form-control input-sm" style="margin-top:0px;" name="operator_position">
      <option value="1">is</option>
      <option value="2">isn't</option>
      <option value="3">contains</option>
      <option value="4">isn't contains</option>
    </select>
    <input class="form-control" id="inputdefault" type="text" placeholder="Position" name="filter_position">
  </div>

  <!-- SALARY -->
  <div class="salary_value">
    <select class="form-control input-sm" style="margin-top:0px" id="salary_oprator" name="operator_salary">
      <option value="1">=</option>
      <option value="2">>=</option>
      <option value="3">
        <=</option>
      <option value="4">></option>
      <option value="5">
        <</option>
    </select>
    <input class="form-control" id="inputdefault" type="text" placeholder="Salary" name="filter_salary">
  </div>
</div>