Which jquery method should I use?

Question

I wish to add the same thing which is 'select service' by clicking the add button and want to have the same functionality. I've been trying this..I also add the 'select service' by clicking the add button which is obtained through the cloning of the individual div(s). But I found that, through cloning I can't get the job done as the functionality won't work for the clone(i.e I can't get the div(s) for shirt,pant,suit by clicking the buttons). I also attach the cloning part coding but it commented. So, rather than cloning, is there any possible way to do this with the help of 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>

the word cloning just meant that calling the 'select service' div....!! plz see the snippet... — Mkh Shimul, Nov 16 '18 at 13:07
Your `$("#add").click()` only adds events to items that exist at the time the code is called. When you add a new ` — freedomn-m, Nov 16 '18 at 13:12
should probably also use classes as ids are meant to be unique and could lead to unwanted side effects if you clone it and get multiple elements with the same id — Pete, Nov 16 '18 at 14:36

Which jquery method should I use?

0 Answers0