добавление строки таблицы вставляет несколько строк после второго поиска, почему? javascript

Question

У меня есть модал с живым поиском моих товаров, это приносит таблицу со списком товаров и кнопку с классом .btnSelect, как эта таблица выводит несколько строк в моем запросе js, который я ищу для ближайшего tr к Мой класс btnSelect для получения значений и вставки в другую таблицу с входными данными (корзиной покупок) все работает хорошо при моем первом поиске, но после второго поиска он добавляет несколько строк с одинаковым значением до 10, иногда я не понимаю почему. переменная e используется для присвоения уникальных имен входным значениям, поэтому я могу с помощью al oop вставить ее в таблицу окончательных заказов, указав php здесь мой код.

var e;
var i = 0;
// lee cada columna
$(".btnSelect").on('click', function () {
    e = i++;
    $('#custId').val(e + 1);
    var currentRow = $(this).closest(
        "tr");
    var col1 = currentRow.find(
        "td:eq(0)").html();
    var col2 = currentRow.find(
        "td:eq(1)").html();
    var col3 = currentRow.find(
        "td:eq(2)").html();
    var col4 = currentRow.find("input").val();
    var col5 = currentRow.find(
        "td:eq(4)").html();
    var col6 = currentRow.find("input[id='item']").val();
    //agrega al carrito      
    if (col4 <= 0) {
        alert("la cantidad tiene que ser mayor 0");
        return false;
    }

    var x = document.getElementById('Carrito').insertRow(0);
    var referencia = x.insertCell(0);
    var talla = x.insertCell(1);
    var color = x.insertCell(2);
    var cantidad = x.insertCell(3);
    var precio = x.insertCell(4);
    var total = x.insertCell(5);
    var boton = x.insertCell(6);
    var item = x.insertCell(7);
    cantidad.innerHTML =
        '<input type="number" class="form-control text-center totalC pares" id="cantidad' + e +
        '"   name="cantidad' + e +
        '" value="' + col4 + '" required readonly>';
    referencia.innerHTML =
        '<input type="text" class="form-control" readonly name="referencia' + e +
        '" value="' + col1 + '">';
    talla.innerHTML = '<input type="text" class="form-control" readonly name="talla' + e +
        '" value="' + col3 + '">';
    color.innerHTML =
        '<input type="text" class="form-control input-lg" readonly name="color' + e +
        '" value="' + col2 + '">';
    precio.innerHTML =
        '<input type="text" class="form-control text-center" readonly id="precio' + e +
        '" name="precio' + e +
        '" value="' + col5 + '">';
    total.innerHTML =
        '<input type="text" readonly class="form-control totalP" name="total' + e +
        '" value=' + parseInt($("#cantidad" + e).val()) * parseInt($("#precio" + e).val() || '0') + '>';
    boton.innerHTML =
        "<button type='button' rel='tooltip' class='borrarF1 btn btn-danger')><i class='material-icons'>close</i></button>";
    item.innerHTML = '<input type="hidden" class="form-control" readonly name="item' + e +
        '" value="' + col6 + '">';