JSFiddle - React, Tailwind, and code Playground

by shojikun

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="form-group row">
        <div class="col-sm-5">
        <label class="font-weight-bold">{{ __('Product Setting') }}</label><br/>
          <button type="button" class="add_field_button btn btn-dark">{{ __('Additional Product') }}&nbsp;<i class="fas fa-plus-square"></i></button>
        </div>
      </div>
      <hr>
      <!-- Frist Group -->
      <div class="product" id="append">
        <!-- Product Details -->
        <span>{{ __('#1') }}</span>
        <div class="form-group row">
         <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Category') }}</label>
         <div class="col-sm-2">
           <input class="form-control" name="products[0][category]" type="text" placeholder="eg. 333" maxlength="3"required>
         </div>
         <label class="col-sm-1 col-form-label font-weight-bold">{{ __('Code') }}</label>
         <div class="col-sm-1">
           <input class="form-control" name="products[0][code]" type="text" placeholder="eg. 22" maxlength="2" required>
         </div>
         <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Partnumber') }}</label>
         <div class="col-sm-3">
          <input class="form-control" name="products[0][partnumber]" type="text" placeholder="eg. NGH92838" required>
         </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-2 col-form-label font-weight-bold">{{ __('Brand') }}</label>
          <div class="col-sm-2">
            <input class="form-control" name="products[0][brand]" type="text" placeholder="eg. Rototype" required>
          </div>
          <label class="col-sm-1 col-form-label font-weight-bold">{{ __('Quantities') }}</label>
          <div class="col-sm-2">
            <input class="form-control" name="products[0][qty]" type="number" placeholder="eg. 1" required>
          </div>
        </div>
        <div...

JavaScript

$(document).ready(function() {

  $('body').on('change','.group_ctrl',function () {
      $('.' + $(this).data('group')).prop('disabled', !this.checked);
  });

  $('body').on('change','.location_ctrl',function () {
     var description = $(this).children('option:selected').data('description');
     $('.' + $(this).data('location')).val(description);
   });

  var serialnumbers = [];

  $(function () {
    $('body').on('click','.keyin_ctrl',function () {
      serialnumbers.push($('.textfield').val() + '; \n');
      $('.textarea').val(serialnumbers.join(''));
      $('.textfield').val('');
    });

    $('body').on('click','.undo_ctrl',function () {
      serialnumbers.pop();
      $('.textarea').val(serialnumbers.join(''));
    });
  });

  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $("#append"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var v = 0;
  $(add_button).on('click',function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
      x++; //text box increment
      v++;
      $(wrapper).append(
        '<div>' +
          '<hr>' +
          '<span>#' +x+ '</span>' +
          '<a href="#" class="float-flat btn btn-danger remove_field float-right"><i class="fas fa-trash-alt"></i></a>' +
          '<div class="clearfix"></div>' +
          '<div class="form-group row">' +
            '<label class="col-sm-2 col-form-label font-weight-bold">{{ __("Category") }}</label>' +
            '<div class="col-sm-2">' +
              '<input class="form-control" name="products['+v+'][category]" type="text" placeholder="eg. 333" maxlength="3"required>' +
            '</div>' +
            '<label class="col-sm-1 col-form-label font-weight-bold">{{ __("Code") }}</label>' +
            '<div class="col-sm-1">' +
              '<input class="form-control" name="products['+v+'][code]" type="text" placeholder="eg. 22"...