JSFiddle - React, Tailwind, and code Playground

by shojikun

HTML

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

    <button class="btn btn-dark keyin_ctrl keyin_ctrl" type="button">key in</button>
    <button class="btn btn-dark undo_ctrl undo_ctrl" type="button">del</button>
    <br />
    <textarea class="form-control display" name="products[0][serialnumbers]" rows="5" placeholder="eg. SGH8484848" readonly></textarea>
  </div>
</div>

CSS

.template {
  display: none;
}

JavaScript

$(document).ready(function() {
  let $append = $('#append');

  $append.on('click', '.keyin_ctrl', function() {
    let $container = $(this).closest('.product-item');
    let $serial = $container.find('.serial');
    $container.find('.display').val(function(i, v) {
      return v + $serial.val() + ';\n';
    });
    $serial.val('').focus();
  });

  $append.on('click', '.undo_ctrl', function() {
    let $container = $(this).closest('.product-item');
    $container.find('.display').val('');
  });

  $('#add_product').on('click', function() {
    var itemNo = $('.product-item').length + 0;
    let $product = $append.find('.product-item.template')
      .clone()
      .show()
      .removeClass('template')
      .insertAfter('.product-item:last');
    $product.find('span').text('#' + itemNo);
    $('#append').append($product);
  }).trigger('click');

  $('.delete').on('click', function() {
    var itemNo = $('.product-item');
    let $product = $append.find('.product-item:last:not(".template")');
    $product.remove();
  });
});