jQuery addClass example

Change class name on click in jQuery

by shojikun

HTML

<div class="form-group row">
  <div class="col-sm-5">
    <label class="font-weight-bold">Product Settings</label><br/>
    <button type="button" id="add_product" class="add_field_button btn btn-dark">Insert Product<i class="fas fa-plus-square"></i></button>
  </div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
  <!-- Product Details -->
  <div class="product-item" id="product-1" data-item="1">
    <span>#1</span>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label font-weight-bold">Serial Number</label>
      <div class="col-sm-5">
        <input class="form-control group_1 serial_1" maxlength="25" placeholder="Key in Serial Number and hit Insert" disabled>
      </div>
      <div class="col-sm-5">
        <button class="btn btn-dark group_1 keyin_ctrl_1 keyin_ctrl" data-item="1" type="button" disabled>Insert</button>
        <button class="btn btn-dark group_1 undo_ctrl_1" type="button" disabled>Delete</button>
        <input class="form-check-input ml-4 mt-2 enable-serial" data-group="group_1" data-item="1" id="checkbox_1" type="checkbox">
        <label class="form-check-label ml-5" for="checkbox_1">Tick to enable Serial Number</label>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label"></label>
      <div class="col-sm-5">
        <textarea class="form-control undo_1 display_1" name="products[0][serialnumbers]" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
      </div>
    </div>
  </div>
  <!-- append start -->
</div>

JavaScript

$(document).ready(function() {

  function enableSerial() {
    $('.enable-serial').on('change', function() {
      var item = $(this).data('item');
      $('.group_' + item).prop('disabled', !this.checked);
    });
  }

  $('#add_product').on('click', function() {
    var itemNo = $('.product-item').length + 1;
    var appendData = '<div class="product-item" id="product-' + itemNo + '" data-item="' + itemNo + '"><span>#' + itemNo + '</span><div class="form-group row"><label class="col-sm-2 col-form-label font-weight-bold">Serial Number</label><div class="col-sm-5"><input class="form-control group_' + itemNo + ' serial_' + itemNo + '" maxlength="25" placeholder="Key in Serial Number and hit Insert" disabled></div><div class="col-sm-5"><button class="btn btn-dark group_' + itemNo + ' keyin_ctrl_' + itemNo + ' keyin_ctrl" data-item="' + itemNo + '" type="button" disabled>Insert</button><button class="btn btn-dark group_' + itemNo + ' undo_ctrl_' + itemNo + '" type="button" disabled>Delete</button><input class="form-check-input ml-4 mt-2 enable-serial" data-group="group_' + itemNo + '"  data-item="' + itemNo + '" id="checkbox_' + itemNo + '" type="checkbox"><label class="form-check-label ml-5" for="checkbox_' + itemNo + '">Tick to enable Serial Number</label></div></div><div class="form-group row"><label class="col-sm-2 col-form-label"></label><div class="col-sm-5"><textarea class="form-control undo_' + itemNo + ' display_' + itemNo + '" name="products[' + (itemNo - 1) + '][serialnumbers]" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea></div></div></div>';
    $('#append').append(appendData);
    enableSerial();
    captureSerial();
  });

  function captureSerial() {
    $('.keyin_ctrl').on('click', function() {
      var item = $(this).data('item');
      var result = $('.serial_' + item).val() + ';\n';
      $('.display_' + item).append(result);
    });
  }
	
  enableSerial();
  captureSerial();

});