JSFiddle - React, Tailwind, and code Playground

by shojikun

HTML

<button type="button" id="add_product" class="btn btn-dark">Add Product&nbsp;<i class="fas fa-plus-square"></i></button>
<hr>
<div id="append">
<div class="product-item" id="product-1" data-item="1">
<span>#1</span><br>
<input class="form-control serial_1" maxlength="25" placeholder="Key in Serial Number and hit button Key In">

<button class="btn btn-dark keyin_ctrl_1 keyin_ctrl" data-item="1" type="button">key in</button>
<button class="btn btn-dark undo_ctrl_1 undo_ctrl" data-item="1" type="button">del</button>
<br>
<textarea class="form-control display_1" name="products[0][serialnumbers]" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>

JavaScript

$(document).ready(function() {
function ctrlSerial() {
    var number = $('.product-item').data('item');
    $('.keyin_ctrl_' + number).on('click', function() {
      var item = $(this).data('item');
      var result = $('.serial_' + item).val() + '\n';
      $('.display_' + item).append(result);
      $('.serial_' + item).val('');
      $('.serial_' + item).focus();
    });

    $('.undo_ctrl_' + number).on('click', function() {
      var item = $(this).data('item');
      $('.display_' + item).html('');
    });
  }
  
  $('#add_product').on('click',function(){
    var itemNo = $('.product-item').length + 1;
    var product = '<div class="product-item" id="product-'+itemNo+'" data-item="'+itemNo+'"><span>#'+itemNo+'</span><br><input class="form-control serial_'+itemNo+'" maxlength="25" placeholder="Key in Serial Number and hit button Key In"><button class="btn btn-dark keyin_ctrl_'+itemNo+' keyin_ctrl" data-item="'+itemNo+'" type="button">Key In</button><button class="btn btn-dark undo_ctrl_'+itemNo+' undo_ctrl" data-item="'+itemNo+'" type="button">Del</button><br><textarea class="form-control display_'+itemNo+'" name="products[0][serialnumbers]" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea></div>';
    $('#append').append(product);
    ctrlSerial();
  });
  
ctrlSerial();
});