Ограничить jQuery добавить только один элемент

Question

Я использую комбинацию load () и append (), чтобы показать больше данных о прокрутке на веб-сайте. Тем не менее, он добавляет бесконечное количество делений. Есть ли способ остановить выполнение после x количества добавленных элементов или полностью остановить функцию после одного действия?

В идеале, я бы хотел, чтобы функция добавляла div #test2 один раз, а затем ждала пользователь должен прокрутить вниз и добавить еще один div, скажем, #test3 ниже.

$('.container').scroll(function() {
  var $this = $(this)
  if (($this.scrollTop() + $this.innerHeight() == $(this)[0].scrollHeight)) {
    $('#content-wrap').append($('<div>').load('data.html #test2'));
  }
});

РЕДАКТИРОВАТЬ Чтобы получить больше информации, вот более полный код того, чего я пытаюсь достичь:

На моем веб-сайте есть раздел с загруженным # test1 и соответствующий ему. js файл нажатием кнопки.

<div class="right">
 <div id="content-wrap">
 <!--- this is where the loaded content is displayed --->
 </div>
</div>

Вот код кнопки:

jQuery(document).ready(function(){ 
$('#menu-btn').click(function(){
    jQuery("#content-wrap").load("data.html #test1")
$.getScript("data.js");
    });
});

Теперь, когда пользователь прокручивает этот контент # test1, я бы хотел автоматически показывать # test2, как только пользователь достигнет нижней части на странице (см. первый код).

Проблема в том, что появляется бесконечное число l oop из # test1 div вместо только одного # test2 данных. Затем, как только пользователь снова прокрутит страницу до конца, я бы хотел показывать данные # test3 и так далее до #testX.

Я ищу способ добавить данные # test2 только один раз, а затем добавить # test3, # test4 .... #testX при прокрутке.