无法更改js代码。如何在js循环中调用函数或编写函数

我在做一个电子商务网站。 https://colorlib.com/wp/template/onetech/ 在这个主题中,我编写了自己的php代码并更改了一些js。 但我面临一个问题,不知道如何解决。 我的html代码是 <div class="product_fav"><i class="fas fa-heart"></i></div> 而js是`

        function initFavs()
{
    var fav = $('.product_fav');
    fav.on('click', function()
    {

            fav.toggleClass('active');


    });

}`

我将此html代码更改为

<div class="product_fav"><i class="pro fas fa-check"></i></div> <span id="txtHint"></span>

和js到`

         function initFavs()
{


    var fav = $('.product_fav');
    var faav = $('.pro');
    faav.on('click', function()
    {
                    var xhttp = new XMLHttpRequest();
                      xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                         document.getElementById("txtHint").innerHTML = this.responseText;
                        }
                      };
                      var xxhttp = new XMLHttpRequest();
                      xxhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                         document.getElementById("wili").innerHTML = this.responseText;
                        }
                      };

            if(faav.hasClass('fa-times'))
             {
                faav.removeClass('fa-times');
                faav.addClass('fa-check');
                fav.toggleClass('active');
                fav.removeClass('deactive');

                xhttp.open("GET", "addfavorite.php?no=" + no + "&id=" + id + "", true);
                xhttp.send();
                xxhttp.open("GET", "totalfavorite.php?no=" + no + "", true);
                xxhttp.send();
            }

            else if(faav.hasClass('fa-check') && fav.hasClass('active'))
            {
                faav.addClass('fa-times');
                faav.removeClass('fa-check');
                fav.toggleClass('deactive');
                fav.removeClass('active');

                xhttp.open("GET", "removefavorite.php?no=" + no + "&id=" + id + "", true);
                xhttp.send();
                xxhttp.open("GET", "totalfavorite.php?no=" + no + "", true);
                xxhttp.send();
            }
            else if(faav.hasClass('fa-check'))
            {
                faav.removeClass('fa-times');
                faav.addClass('fa-check');
                fav.toggleClass('active');
                fav.removeClass('deactive');

                xhttp.open("GET", "addfavorite.php?no=" + no + "&id=" + id + "", true);
                xhttp.send();
                xxhttp.open("GET", "totalfavorite.php?no=" + no + "", true);
                xxhttp.send();
            }

    });


}`

对于本页 http://shop.virusincbd.com/product.php

function initFavs()
{
    // Handle Favorites
    var items = document.getElementsByClassName('product_fav');
    for(var x = 0; x < items.length; x++)
    {
        var item = items[x];
        item.addEventListener('click', function(fn)
        {
            fn.target.classList.toggle('active');

        });
    }
}`

对于本页 http://shop.virusincbd.com/