Как добавить динамически увеличивающиеся элементы с помощью jQuery?

Question

Так что я хочу добавить элементы, которые будут иметь динамический компонент для них при нажатии. Моя проблема в том, что элемент, о котором я говорю, это php-код. Мой код, как видно ниже, не работает, и я понятия не имею, как его исправить. Если у меня просто есть элемент html для добавления, он будет работать, но он этого не делает. Я не очень хорошо разбираюсь в jQuery и поэтому нуждаюсь в помощи.

Это мой код:

<div id="main" style="text-align: center;"> 
    <input type="button" id="btAdd" value="Add Element" class="bt" /> 
    <input type="button" id="btRemove" value="Remove Element" class="bt" /> 
    <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br /> 
</div> 

И это мой JQuery:

var iCnt = 0; 

    var container = $('.equip-ops'); 

    $('#btAdd').click(function() { 
     if (iCnt <= 19) { 

      iCnt = iCnt + 1; 

      // ADD ITEM. 
      $(container).append('<label>Selecteaza Operatiune<select name="eq_1_op_' + iCnt + '"><?php foreach ($operations_' + iCnt + '->fetchAll() as $operation) : ?><option value="<?php echo $operation['oname']; ?>"><?php echo $operation['oname']; ?></option><?php endforeach; ?></select></label> 
      '); 

      // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED. 
      if (iCnt == 1) { 

       var divSubmit = $(document.createElement('div')); 
       $(divSubmit).append('<input type=button class="bt" onclick="GetTextValue()"' + 'id=btSubmit value=Submit />'); 

      } 

      // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER. 
      $('#main').after(container, divSubmit); 
     } 
     // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. 
     // (20 IS THE LIMIT WE HAVE SET) 
     else {  

      $(container).append('<label>Reached the limit</label>'); 
      $('#btAdd').attr('class', 'bt-disable'); 
      $('#btAdd').attr('disabled', 'disabled'); 

     } 
    }); 

    $('#btRemove').click(function() { // REMOVE ELEMENTS ONE PER CLICK. 
     if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; } 

     if (iCnt == 0) { $(container).empty(); 

      $(container).remove(); 
      $('#btSubmit').remove(); 
      $('#btAdd').removeAttr('disabled'); 
      $('#btAdd').attr('class', 'bt') 

     } 
    }); 

    $('#btRemoveAll').click(function() { // REMOVE ALL THE ELEMENTS IN THE CONTAINER. 

     $(container).empty(); 
     $(container).remove(); 
     $('#btSubmit').remove(); iCnt = 0; 
     $('#btAdd').removeAttr('disabled'); 
     $('#btAdd').attr('class', 'bt'); 

    }); 
}); 

Answer 1

Ok, этот код имеет ряд важных вопросов, которые просто неправильно.

1. Если этот код, находится внутри <script></script> в файле PHP, то он может работать при смешивании PHP и JS вместе. Если его внутри файла .js, он никогда не будет работать. JS - это внешний интерфейс , а PHP - это бэкэнд-язык.
2. Прочитать и узнать о AJAX: $.ajax() и $.getJSON(). То будет метод, для того чтобы получить ваши PHP и JS работать совместно.
3. Представьте свой <select> с PHP, возможно, все в порядке, если вы создаете шаблон, но для использования JS нет. Внесите ваши данные для параметров выбора в виде массива и дайте JS проанализировать его в HTML, а затем .append().
4. Все, что удаляет и опустошает внизу, являются излишними. Если вы хотите, чтобы все было удалено из #main, а затем просто: $('#main').empty();

Я собираюсь оставить его в данный момент.

Вот некоторые ресурсы, где для начала:
jQuery.ajax()
Programmatically create select list
jQuery.getJSON()
Getting jquery and php work together with forms? (this has forms, ajax, php)