I have a little problem to confuse, when I click the button to add new table, it’s cannot add under the

I have a little problem to confuse, when I click the button to add new table, it’s cannot add under the <tr>

Where has a problem?

this is my code

js.code

function add_agdata_record(o) {
    let read_develop_ag = $(o).data("read_develop_ag");
    let read_store = $(o).data("read_store");
    let read_agaMountPer = $(o).data("id_adread_agaMountPermin");
    let read_agMoney1 = $(o).data("read_agMoney1");
    let read_agMoney2 = $(o).data("read_agMoney2");
    let read_agMoney3 = $(o).data("read_agMoney3");
    $(o).parent().parent().append('<tr><td><input type="text" id="develop_ag_new" name="develop_ag_new" value="' + read_develop_ag + '"></td>' +
        ' <td><input type="text" id="store" name="store" value="' + store + '"></td>' +
        ' <td><input type="text" id="agaMountPer" name="agaMountPer" value="' + agaMountPer + '"></td>' +
        ' <td><input type="text" id="agMoney1" name="agMoney1" value="' + agMoney1 + '"></td>' +
        ' <td><input type="text" id="read_agMoney2" name="read_agMoney2" value="' + agMoney2 + '">' +
        ' </td><td><input type="text" id="agMoney3" name="agMoney3" value=' + agMoney3 + '""></td></tr>');
}

PHP code

<table width="100%" border="1" id="myTable">
    <tr>
        <td class="main_t_2 input-group-addon">Real No.</td>
        <td colspan="5"><input type="text" id="agaMount" name="agaMount" value="{$read_agaMount}"></td>
    </tr>
    <tr>
        <td class="main_t_2 input-group-addon">AG</td>
        <td class="main_t_2 input-group-addon">Store</td>
        <td class="main_t_2 input-group-addon">AG%</td>
        <td class="main_t_2 input-group-addon">Bonus</td>
        <td class="main_t_2 input-group-addon">Money2</td>
        <td class="main_t_2 input-group-addon">Money3</td>
    </tr>
    <tr>
        <td><input type="text" id="develop_ag_new" name="develop_ag_new" value="{$read_develop_ag}"></td>
        <td><input type="text" id="store" name="store" value="{$read_store}"></td>
        <td><input type="text" id="agaMountPer" name="agaMountPer" value="{$read_agaMountPer}"></td>
        <td><input type="text" id="agMoney1" name="agMoney1" value="{$read_agMoney1}"></td>
        <td><input type="text" id="read_agMoney2" name="read_agMoney2" value="{$read_agMoney2}"></td>
        <td><input type="text" id="agMoney3" name="agMoney3" value="{$read_agMoney3}"></td>
    </tr>
    <tr>
        <td><input type="button" value="Add AG"  onclick="add_agdata_record(this)"></td>
        <td colspan="4" align="right">Update?:</td>
        <td><input type="radio" id="upd" name="upd" value="2" checked>
          NO
            <input type="radio" id="upd" name="upd" value="0">
            Update
            <input type="radio" id="upd" name="upd" value="1">
            Insert
        </td>
    </tr>
</table>

When I click the add_ag button, it cannot add table under the

Answer

like this

$(function(){
            $("#add").click(function(){
                $('#mt tbody').append('<tr><td><input type="text" id="develop_ag_new[]" name="develop_ag_new[]" value=""></td>'+
                '<td><input type="text" id="store[]" name="store[]" value=""></td>'+
                '<td><input type="text" id="agaMountPer[]" name="agaMountPer[]" value=""></td>'+
                '<td><input type="text" id="agMoney1[]" name="agMoney1[]" value=""></td>'+
                '<td><input type="text" id="agMoney2[]" name="agMoney2[]" value=""></td>'+
                '<td><input type="text" id="agMoney3[]" name="agMoney3[]" value=""></td></tr>');
                tag++;
            });
            $("#del").click(function(){
                $("#mt tbody tr:last").remove();
            });
            })

html

<tr>
                        <td><input type="text" id="develop_ag_new" name="develop_ag_new" value="{$v.develop_ag}" disabled="disabled"></td>
                        <td><input type="text" id="store" name="store" value="{$v.store}" disabled="disabled"></td>
                        <td><input type="text" id="agaMountPer" name="agaMountPer" value="{$v.agaMountPer}" disabled="disabled"></td>
                        <td><input type="text" id="agMoney1" name="agMoney1" value="{$v.agMoney1}" disabled="disabled"></td>
                        <td><input type="text" id="agMoney2" name="agMoney2" value="{$v.agMoney2}" disabled="disabled"></td>
                        <td><input type="text" id="agMoney3" name="agMoney3" value="{$v.agMoney3}" disabled="disabled"></td>
                    </tr>