JSFiddle - React, Tailwind, and code Playground

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 undo_ctrl" 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 display_1" data-item="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);
    });
  }
	
  
  var limit = 9;
  var x = 0;

 
  $('#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 + ' undo_ctrl" 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"...