Javascript 尝试在jQuery中循环和打印元素

我试图循环遍历一个动态元素，然后用jquery打印它

这是我使用的代码

$('.recipe-steps #addNewStep').on('click', function () {
            var s = $('.recipe-steps .step').size() + 1;
            $('<div class="step pure-u-1-1"><textarea id="step" name="step_detail[]" class="pure-u-1" placeholder="Step ' + s + '"></textarea><a href="javascript:void(0)" class="remove" title="Remove">&times;</a></div>').appendTo($('.recipe-steps .steps'));
            return false;
        });
        $(document).on('click', '.step .remove', function () {
            $(this).parents('.step').remove();
            return false;
        });

$（'.recipe steps#addNewStep'）。on（'click'，function（）{
var s=$（'.recipe steps.step'）.size（）+1；
$（''）.appendTo（$（'.recipe-steps.steps'）；
返回false；
});
$（文档）.on（'单击'，'）。步骤.remove'，函数（）{
$（this.parents（'.step'）.remove（）；
返回false；
});

然而，它只是打印出第一个元素，而不是前面的元素。我创造了一把小提琴，有人知道为什么吗

---

我无法找到完美的解决方案（稍后再看），但我已重新设计了该函数，使其在一定程度上正常工作

$("body").on('input propertychange', function () {
      var outputme="";
      $('textarea').each(function (index) {
            outputme+='<br>'+(index+1) + '. ' + $(this).val();
      });
      $('#lp-step').html('<h3>Method</h3>'+outputme);
  });

$（“body”）.on（'InputPropertyChange'，function（）{
var outputme=“”；
$（'textarea'）。每个（函数（索引）{
outputme+='
'+（索引+1）+'.+$（this.val（）；
});
$（'#lp step'）.html（'Method'+outputme）；
});

这将在文本区域更改时更新“预览”，用于缩小范围，但我建议您查看HTML并尝试将其简化一点

---

只有一个元素可以具有给定的id。而且，父母没有理由寻找兄弟姐妹。而且，当我在项目中尝试它时，它从。2和1开始。你知道我有什么办法可以解决这个问题吗？在JFiddle上，它工作得很好，把你的代码放到jsfiddle.net/中，然后尝试复制它