如何使用jQuery添加动态递增项？

Question

So what I want to do is add items that will have a dynamic component to them on click. My problem is that the item I am talking about is php code. My code, as seen below, is not working, and I have no idea how to fix it. If I just have an html element to append, it will work, this one however does not. I am not great with jQuery and thus need help.

This is my code :

<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>

And this is my 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, this code has some critical issues, that are just plain wrong.

1. If this code, is inside of <script></script> in your PHP file, then it might work, with mixing PHP and JS together. If its inside of a .js file, it will never work. JS is a frontend language and PHP is backend language.
2. Read and learn about AJAX: $.ajax() and $.getJSON(). Thats the method, for getting your PHP and JS work together.
3. Foreaching your <select> with PHP, might be ok, if you generate a template, but for JS use not. Inject your select-options data as an array and let JS parse it into HTML and then .append().
4. All those removes and empties at the bottom are overkill. If you want everything to be removed from #main, then simply: $('#main').empty();

I am going to leave it at this point.

Here are some resources, where to start:
jQuery.ajax()
Programmatically create select list
jQuery.getJSON()
Getting jquery and php work together with forms? (this has forms, ajax, php)