.append（）到新创建的元素，与页面上的其他元素具有相同的类

Question

好的，我正在尝试动态地向页面添加项目，但是当我添加多个项目时遇到问题，因为HTML会多次附加到具有相同类的所有元素。我试过和.closest和.parents一起玩，但似乎无法让它发挥作用。

$('#addInquiryItem').on('valid.fndtn.abide', function () {

var x = $("#addInquiryItem").serializeArray();
  $(".added-inquiry").append (
    '<div class=row>' +
     '<div class="large-8 large-offset-2 column">'+
      '<div class="added-inquiry-item">' +
      '<a class="edit-inquiry-item">' +'<span class="fi-wrench iconic-sm" title="edit" aria-hidden="true">' + '</span>' + '</a>' +
     '</div>'
         );

$.each(x, function(i, field){
     $(".added-inquiry-item").append(
          '<input type="hidden" name="' + field.name + '" value="' + field.value + '"/>' +
          '<span class="' + field.name + '">' + field.value + '</span>'
      );
 });

 $(".added-inquiry").closest(".added-inquiry-item").append(
   '</div>' +
   '</div>'
  );

$(this).trigger("reset");
});

您可以看到问题在于，当页面上有多个.added-inquiry-item div时，内容会被附加到每个.added-inquiry-item div，而不仅仅是新创建的div。

非常感谢你的帮助。