我应该使用哪种jquery方法？

Question

我希望通过单击添加按钮添加相同的东西，即“选择服务”，并希望具有相同的功能。我一直在尝试。.我还通过单击添加按钮（通过克隆单个div获得）来添加“选择服务”。但是我发现，通过克隆我无法完成工作，因为该功能不适用于克隆（即我无法通过单击按钮来获得衬衫，裤子，西装的div）。我还附上了克隆部分的编码，但它注释了。因此，除了克隆以外，还有没有可能借助 jquery 来做到这一点的方法？

$(function() {
  $('#selectService').change(function() {
    $('.hidden-fields').hide();
    var $target = $(this).val();
    $('#' + $target).show();
  });
  $("#add").click(function() {
     var $orderClone  = $("#orderClone:last");
     var $clone = $orderClone.clone();
     $clone.find('*').val('');
     $orderClone.after($clone);
   });
 });

.hidden-fields {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orderClone" class="row">
  <div class="table-responsive">
    <table class="table table-striped">
      <tr>
        <th>Service</th>
      </tr>
      <tr>
        <td>
          <select id="selectService" name="service[]" class="form-controlservice">
            <option disabled="" selected="">Select Service</option>
            <option id="one" value="shirt">Shirt</option>
            <option value="pant">Pant</option>
            <option value="suit">Suit</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
</div>
<div class="col-md-4 hidden-fields" id="shirt">
  <h4><b>Shirt</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Body</label>
    <input type="text" class="form-control" name="body" />
  </div>
  <div class="form-group required">
    <label class="control-label">Shoulder</label>
    <input type="text" class="form-control" name="shoulder" />
  </div>
  <div class="form-group required">
    <label class="control-label">Neck</label>
    <input type="text" class="form-control" name="neck" />
  </div>
</div>
<div class="col-md-4 hidden-fields" id="pant">
  <h4><b>Pant</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Length</label>
    <input type="text" class="form-control" name="length" />
  </div>
  <div class="form-group required">
    <label class="control-label">Thigh</label>
    <input type="text" class="form-control" name="thigh" />
  </div>
</div>
<div class="col-md-4 hidden-fields" id="suit">
  <h4><b>Suit</b></h4>
  <hr/>
  <div class="form-group required"> <label class="control-label">Name</label>
    <input type="text" class="form-control" name="length" />
  </div>
  <div class="form-group required">
    <label class="control-label">Name</label>
    <input type="text" class="form-control" name="thigh" />
  </div>
</div>
<br>
<button type="button" id="add" name="add" class="btn btn-success" >Add</button>