如何使用自动扩展功能添加/删除多个文本区域

Question

我正在尝试创建一个页面，在该页面上我可以使用自动扩展功能在onclick上添加/删除多个文本区域。我可以在这里找到有效的代码，但是不幸的是，自动扩展功能仅在第一个文本区域有效。

//这是我的脚本

$(document).ready(function () {

    var counter = 1;

    $("#addButton").click(function () {
            if (counter > 15) {
                alert("Only 15 textboxes allowed");
                return false;
            }
        $('<div/>',{'id':'TextBoxDiv1' + counter}).html(
              $('<textarea/>',{'id':'myTextArea'}).html( 'STEP ' + counter + ' : ' )
            )
                  .appendTo( '#TextBoxesGroup' )

   $("#myTextArea").each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
      }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
      });
                  counter++;

        });

 $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;
            $("#TextBoxDiv1" + counter).remove();
        });
        });

这是我的HTML。我没有在加载时创建textarea，因为我只会在需要时添加textarea。

 <div id='TextBoxesGroup'>
 <div id="TextBoxDiv1"></div></div>
<input type='button' value='ADD TS STEPS' id='addButton' class="bubbly-button">
<input type='button' value='REMOVE TS' id='removeButton' class="bubbly-button">

这是我的CSS

div {
  padding: 1px;
  }

 textarea {
   outline: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
      }

#myTextArea {
  width: 550px;
  height: 1px;
  min-height: 35px;
  overflow-y: hidden;
  font-size: 14px;
  border: 3px solid orange;
  background-color:white;color:mediumvioletred;
  display: block;
  }