Javascript Нажмите Event Call Дважды Рули

Question

Я пытался ввести какой-нибудь код javascript, чтобы вызвать какой-то ajax запрос на кнопку «Мне нравится», чтобы добавить что-то в мою базу данных

Есть 4-6 частей, подобных приведенному ниже блоку кода, но главное, правильно работают только те, которые размещены в первом {{каждом}} блоке файла .hbs, остальные, когда я нажимаю на элемент сердца, событие onclick вызывалось дважды

Мой главный .hbs

{{#if search.name}}
{{#if search.searchQuery}}
<hr>
<h2>Kết Quả Tìm Kiếm Cho "{{search.searchQuery}}":</h2>
<h3>Sản Phẩm: Tên</h3>
<hr>
{{#each search.name}}
<div class="card mb-3" style="max-width: 720px;border-style:none">
    <div class="row no-gutters">
        <div class="col-md-4">
            <a href="/product/{{PRODUCT_ID}}">
                <img src={{PRODUCT_IMG}} class="card-img" alt="..."
                    style="border-radius: 30px; width:239px; height:163px">
            </a>
        </div>
        <div class="col-md-7">
            <div style="padding-left: 7px;">
                <h5 class="card-title" style="margin-top: 7px;">{{PRODUCT_NAME}}</h5>
                <p class="card-text">Giá Hiện Tại:{{#if CURRENT_PRICE}} {{CURRENT_PRICE}} {{else}} Chưa có {{/if}}</p>
                <p class="card-text"> {{#if WINNER_ID}} Người ra giá: {{WINNER_ID}}{{/if}} </p>
                <p class="card-text">Ngày đăng: {{PRODUCT_TIME_PUSH}} </p>
                <p class="card-text"> Ngày kết thúc: {{PRODUCT_TIME_END}}</p>
            </div>
        </div>
        <div class="col-md-1 text-right">
            <a id="addFavor{{PRODUCT_ID}}">
                <i class="far fa-heart fa-2x" id="i{{PRODUCT_ID}}" value={{PRODUCT_ID}} name="like"
                    style="margin-right: 10px;margin-top: 10px;color:#dc143c;"></i>
            </a>
        </div>
        <script>
            function addLike(productId) {
                console.log("Like added")
                console.log(productId)
                $.ajax({
                    url: 'http://localhost:3000/product/like-add/' + productId,
                    type: 'GET',
                    dataType: 'json',
                    success: function () {
                        alert('Add to your watchlist!')
                    },
                    error: function () {
                        alert('Add to your watchlist unsuccessfully !')
                        window.location.href = "http://localhost:3000/account/login/default";
                    }
                })
                    .done(function (data) {
                        console.log(data)
                    })
            }
            function disLike(productId) {
                console.log("Like added")
                console.log(productId)
                $.ajax({
                    url: 'http://localhost:3000/product/like-remove/' + productId,
                    type: 'GET',
                    dataType: 'json',
                    success: function () {
                        alert('Removed ' + productId + ' from your watchlist!')
                    },
                    error: function () {
                        alert('Removed ' + productId + ' from your watchlist unsuccessfully!')
                    }
                })
                    .done(function (data) {
                        console.log(data)
                    })
            }
            $(document).ready(function () {
                $("#addFavor{{PRODUCT_ID}}").click(function () {
                    var heartClass = $('#i{{PRODUCT_ID}}').attr('class');

                    if (heartClass == 'far fa-heart fa-2x') {
                        $('#addFavor{{PRODUCT_ID}}').empty();
                        $('#addFavor{{PRODUCT_ID}}').append(`
                                <i class="fas fa-heart fa-2x" id="i{{PRODUCT_ID}}" value={{PRODUCT_ID}} name="like" style="margin-right: 10px;margin-top: 10px;color:#dc143c;"></i>
                            `);
                        console.log(heartClass);
                        addLike({{ PRODUCT_ID }});
            }
                    else {
                    $('#addFavor{{PRODUCT_ID}}').empty();
                    $('#addFavor{{PRODUCT_ID}}').append(`
                                <i class="far fa-heart fa-2x" id="i{{PRODUCT_ID}}" value={{PRODUCT_ID}} name="like" style="margin-right: 10px;margin-top: 10px;color:#dc143c;"></i>
                            `);
                    console.log(heartClass);
                    disLike({{ PRODUCT_ID }});
                    }
                });
            });
        </script>
    </div>
</div>
{{else}}
<div class="card mb-3" style="max-width: 720px;border-style:none">
    <div class="row no-gutters">
        <div class="col-md-7">
            <div style="padding-left: 7px;">
                <h5 class="card-title" style="margin-top: 7px;">Không tìm thấy kết quả nào.</h5>
            </div>
        </div>
    </div>
</div>
{{/each}}
{{/if}}
{{/if}}

Я слышал об использовании предварительной компиляции панелей управления для вставки кода в частичные шаблоны, но я не знаю, как внедрить их в мой код. Кто-нибудь может мне с этим помочь. Очень ценится.