有一个jQuery将文本字段添加到textarea并删除最后一个追加，但是现在我需要它来动态创建文本字段textarea

Question

我正在尝试使其能够被新动态创建的文本字段，textarea，附加和删除按钮使用

我不知道如何，但是我尝试制作jquery，希望从你们那里获得更多见识

HTML代码

<input class="form-control group_1 textfield_ctrl" id="textfield" placeholder="Key in Serial Number and hit button 'Key In'">

<button class="btn btn-dark group_1" type="button" id="keyin">{{ __('Key In') }}</button>
<button class="btn btn-dark group_1" type="button" id="undo">{{ __('Del') }}</button>

<textarea class="form-control textarea_1" id="textarea" name="products[0][serialnumbers]" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>

jQuery代码

var serialnumbers = [];

  $(function () {
    $('#keyin').click(function () {
      serialnumbers.push($('#textfield').val() + '; \n');
      $('#textarea').val(serialnumbers.join(''));
      $('#textfield').val('');
    });

    $('#undo').click(function () {
      serialnumbers.pop();
      $('#textarea').val(serialnumbers.join(""));
    });
  });

我想做什么并尝试过

HTML代码

<input class="form-control group_1 textfield_1" id="textfield" placeholder="Key in Serial Number and hit button 'Key In'">

<button class="btn btn-dark group_1 keyin_ctrl" type="button" id="keyin">{{ __('Key In') }}</button>
<button class="btn btn-dark group_1 undo_ctrl" type="button" id="undo">{{ __('Del') }}</button>


<textarea class="form-control textarea_1" id="textarea" name="products[0][serialnumbers]" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>

jQuery代码

var serialnumbers = [];

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

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

基本上，在追加新的文本字段，文本区域和按钮组时，允许将按钮从文本字段追加到新的文本区域