为什么附加按钮时重复按钮？

Question

我的按钮仅会为找到的每个单词添加一次，但不知何故，它会添加一次以上。 我不知道什么会导致这种情况发生，因此我发布了更多的代码，而不仅仅是按钮和附件。 我认为在追加之前出现了问题？ 在这里，您可以查看图片： 如您所见，有4个字...但是大约有10个按钮，而应该是4个。

function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
exercises.forEach(function(exercise) {
var exer = $('<div/>', {
    'class': 'row'
  })
  .append(
    $('<div/>', {
      'class': 'col-md-3'
    })
    .append(
      $('<div/>', {
        'class': 'row'
      })
      .append($('<div>', {
        class: 'col-md-3 testforbutton',
       // text: "(button here)"
      }))
      .append($('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries
        text: exercise.word
      }))
    )
  ).append(
    $('<div>', {
      class: 'col-md-9',
      text: "(4 x col-3 here)"
    })
  );

$("#exerciseField").append(exer);
ID123++;
$('.testforbutton').append(getAudioForWords());
});
}

createExercise(fakejson);


function getAudioForWords() {
    var audioBtn = $('<button/>', {
    'class': 'btn btn-primary fa fa-volume-up sound'
   });
   return audioBtn;
 }

Answer 1

从代码开始， 练习的每次迭代都将向所有现有的testforbutton元素添加一个按钮，从而在先前添加的行中复制按钮。

只是限制你的选择搜索的testforbutton在当前元素exer元素

exer.find('.testforbutton').append(getAudioForWords());