在动态多个添加中，在“选择”框中加载记录

Question

我们应用“在选择框上加载记录”的概念。仅对单行产生影响。应用多个动态插入数据后，它无法执行。我们如何确保它也影响多次添加。听起来有些事情要做，但目前尚无调整的想法。有人可以协助吗？

HTML：

<div class="form-group">
    <form name="add_cablename" id="add_cablename">
        <div class="table-responsive">
            <table class="table table-bordered" id="static_field">
                <tr>
                    <th style="width:30%;">Xconnect Type<a href="#" data-toggle="tooltip"
                                                           title=" Choose type : Physical ; Drop Insert "><i
                            class="fa fa-question-circle"></a></th>
                    <th style="width:40%;">Equipment</th>
                    <th style="width:40%;">Port<a href="#"></i></a></th>
                </tr>
                <tr>
                    <td><select name="xconnect[]" class="form-control select2">
                        <option value="" disabled selected hidden>Select...</option>
                        <option value="physical">Physical</option>
                        <option value="D/I">Drop Insert</option>
                    </select></td>
                    <td><select name="site[]" id="site" class="form-control select2">
                        <option value="">Show All Sites</option>
                        <?php echo fill_site($db); ?></select></td>
                    <td><select name="card[]" id="show_card" class="form-control select2">
                        <option value="">Show All Cards</option>
                        <?php echo fill_card($db); ?></select></td>
                    <td>
                        <button type="button" name="add_cablename_btn" id="add_cablename_btn" class="btn btn-success">
                            ++
                        </button>
                    </td>
                </tr>
            </table>
            <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit"/>
        </div>
    </form>
</div> 

Javascript：

<script>

    $(document).ready(function () {
        $('#site').change(function () {
            var ne_name = $(this).val();
            $.ajax({
                url: "load_data.php",
                method: "POST",
                data: {ne_name: ne_name},
                success: function (data) {
                    $('#show_card').html(data);
                }
            });
        });
    });

    $(document).ready(function () {
        var i = 1;
        $('#add_cablename_btn').click(function () {
            i++;
            var html_code = '<tr id="row' + i + '">';
            html_code += '<td><select name="xconnect[]" class="form-control select2"><option value="" disabled selected hidden>Select...</option><option value="physical" >Physical</option><option value="D/I">Drop Insert</option></select></td>';
            html_code += '<td><select name="site[]" id="site" class="form-control select2"><option value="">Show All Sites</option><?php echo fill_site($db); ?></select></td>';
            html_code += '<td><select name="card[]" id="show_card" class="form-control select2"><option value="">Show All Cards</option><?php echo fill_card($db); ?></select></td>';
            html_code += '<td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td>';
            $('#static_field').append(html_code);

        });
        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr("id");
            $('#row' + button_id + '').remove();
        });
    });
</script>

PHP（load_data.php）：

$output = '';
if (isset($_POST["ne_name"])) {
    if ($_POST["ne_name"] != '') {
        $sql = "SELECT * FROM trans_card WHERE ne_name = '" . $_POST["ne_name"] . "'";
    }
    else {
        $sql = "SELECT * FROM trans_card";
    }
    $result = pg_query($db, $sql);
    while ($row = pg_fetch_array($result)) {

        $output .= '<option value="' . $row["installed_eqpt_type"] . '">' . $row["installed_eqpt_type"] . '</option>';

    }
    echo $output;
}