如何动态填充文本区域＆amp;通过Jquery的错误消息

Question

我是Jquery＆amp;的新手。现在我有两个textarea。当点击Add按钮时，我必须在click＆amp; amp;上连续动态添加两个textarea。也必须生成错误消息。

$(document).ready(function(e) {
  var counter = 1;
  
  $("#addButton").click(function() {
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html(' <textarea class="form-control" id="prodetails-prdut-nme ' + counter + '" rows="1"></textarea> <span class="prodetails-prdut-nme-error-msg pull-left color-red" style="display: none;">Must be less than 30characters.</span><div class="pull-right clr-gray" id="prodetails-prdut-nme-cnt"></div><textarea class="form-control" id="prodetails-spec" rows="1"></textarea> <span class="prodetails-spec-error-msg pull-left color-red" style="display: none;">Must be less than 50 characters.</span><div class="pull-right clr-gray" id="prodetails-spec-cnt"></div>');
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
  });
  
  $('#prodetails-prdut-nme-cnt').html(30 + ' characters remaining');
  $('#prodetails-prdut-nme').keyup(function() {
    var text_length = $('#prodetails-prdut-nme').val().length;
    var text_remaining = 30 - text_length;
    if (text_remaining < 0) {
      $('.prodetails-prdut-nme-error-msg').show();
      $(this).addClass('cnt-error-clr');
      $('#prodetails-prdut-nme-cnt').hide();
    } else {
      $('#prodetails-prdut-nme-cnt').show();
      $(this).removeClass('cnt-error-clr');
      $('.prodetails-prdut-nme-error-msg').hide();
    }
    $('#prodetails-prdut-nme-cnt').html(text_remaining + ' characters remaining');
  });
  
  $('#prodetails-spec-cnt').html(50 + ' characters remaining');
  $('#prodetails-spec').keyup(function() {
    var text_length = $('#prodetails-spec').val().length;
    var text_remaining = 50 - text_length;
    if (text_remaining < 0) {
      $('.prodetails-spec-error-msg').show();
      $(this).addClass('cnt-error-clr');
      $('#prodetails-spec-cnt').hide();
    } else {
      $('#prodetails-spec-cnt').show();
      $(this).removeClass('cnt-error-clr');
      $('.prodetails-spec-error-msg').hide();
    }
    $('#prodetails-spec-cnt').html(text_remaining + ' characters remaining');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" id="prodetails-prdut-nme" rows="1"></textarea> <span class="prodetails-prdut-nme-error-msg pull-left color-red" style="display: none;"><i aria-hidden="true" class="fa fa-exclamation-circle"></i> Must be less than 30 characters.</span>
<div class="pull-right clr-gray" id="prodetails-prdut-nme-cnt"></div>
<textarea class="form-control" id="prodetails-spec" rows="1"></textarea> <span class="prodetails-spec-error-msg pull-left color-red" style="display: none;"><i aria-hidden="true" class=
"fa fa-exclamation-circle"></i> Must be less than 50 characters.</span>
<div class="pull-right clr-gray" id="prodetails-spec-cnt"></div>
<div id='TextBoxesGroup'></div>
<form>
  <input id='addButton' type='button' value='Add production capacity for more products'>
</form>

fiddle