Probleme autocomplete Jquery sur une table dynamique

Bonjour,

depuis hier j'essaie de trouver une solution mais j'arrive pas ,

mon probléme c'est que le autocomplete de Jquery ne marche que sur la premiere ligne quand j'ajoute une deuxiement ligne ca marche plus ,

si possible aussi de m'indiquer comment faire pour afficher aussi le prix automatiquement de puis la table en saisissant la reference

<?php
if (isset($_POST['search'])) {
    $response = "<ul><li>No data found!</li></ul>";


    $connection = new mysqli('localhost', 'root', 'admin', 'logigestion');
    $q = $connection->real_escape_string($_POST['q']);

    $sql = $connection->query("SELECT ref FROM articles WHERE ref LIKE '%$q%'");
    if ($sql->num_rows > 0) {
        $response = "<ul>";

        while ($data = $sql->fetch_array())
            $response .= "<li>" . $data['ref'] . "</li>";

        $response .= "</ul>";
    }


    exit($response);
}
?>


<table class="table-sortable" id="editor_tab">
    <tbody>
        <tr id="addr0" data-id="0" class="hidden">
            <td data-name="ref">
                <input type="text" name='ref0' id="ref" />
                <div id="result"></div>
            </td>
            <td id="price" data-name="price">
                <input type="number" name="Price0" class=" price">
            </td>
            <td id="quantite" data-name="quantite">
                <input type="number" name="quantite0" class="quantite">
            </td>
            <td data-name="del">
                <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'><span
                        aria-hidden="true">×</span></button>
            </td>
        </tr>
    </tbody>
</table>

    <a id="Ajouter_ligne" class="btn btn-primary float-right">ADD ROW</a>

    <tr>
        <th class="text-center">Total</th>
    </tr>

    <tr>
        <th class="text-center" id="total_price"></th>
    </tr>
</table>


<script>
$(document).ready(function (){

    $("table").on("input", function (){

        $("tbody tr").each(function (){

            $this = $(this);

            $this.find(".total_row").val(+$this.find(".quantite").val() * +$(this).find(
                ".price").val());

            $("#total_price").text(0);

            $(".total_row").each(function (){
                if (this.value != "")
                    $("#total_price").text(parseInt($("total_price").text()) + parseInt($(
                        this).val()));
            });

        });

    });
    $("#add_new_row").on("click", function (){

        var newid = 0;
        $.each($("#editor_tab tr"), function (){
            if (parseInt($(this).data("id")) > newid) {
                newid = parseInt($(this).data("id"));

            }

        });
        newid++;

        var tr = $("<tr></tr>", {
            id: "addr0" + newid,
            "data-id": newid
        });

        $.each($("#editor_tab tbody tr:nth(0) td"), function (){
            var td;
            var cur_td = $(this);

            var children = cur_td.children();

            // add new td and element if it has a nane
            if ($(this).data("name") !== undefined) {

                td = $("<td></td>", {
                    "data-name": $(cur_td).data("name")
                });

                var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
                c.attr("name", $(cur_td).data("name") + newid);
                c.appendTo($(td));
                td.appendTo($(tr));
            } else {

                td = $("<td></td>", {
                    'text': $('#editor_tab tr').length
                }).appendTo($(tr));
            }


        });

        $("<td></td>").append(
            $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
                .click(function (){
                    $(this).closest("tr").remove();
                })
        ).appendTo($(tr));


        $(tr).appendTo($('#editor_tab'));

        $(tr).find("td button.row-remove").on("click", function (){

            $(this).closest("tr").remove();
        });


    });
    var fixHelperModified = function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();

        $helper.children().each(function (index) {
            $(this).width($originals.eq(index).width())
        });

        return $helper;
    };
    $(".table-sortable tbody").sortable({
        helper: fixHelperModified
    }).disableSelection();
    $(".table-sortable thead").disableSelection();
    $("#add_new_row").trigger("click");

    $("#ref").keyup(function (){
        var query = $("#ref").val();

        if (query.length > 2) {
            $.ajax({
                url: 'add_product.php',
                method: 'POST',
                data: {
                    search: 1,
                    q: query
                },
                success: function (data) {
                    $("#result").html(data);
                },
                dataType: 'text'
            });
        }
    });
    $(document).on('click', 'li', function (){
        var articles = $(this).text();
        $("#ref").val(articles);
        $("#result").html("");
    });
});
</script>