Syntax Error Unexpected Character

Syntax Error Unexpected Character

Hi,

I need some help in jQuery where i'm receiving this error when try to run the script.

  1. {source}
    <div class="wrap">
        <table class="headerTitle">
            <tr>
                <td>
                    <p class="pTitle">STEP 1 : CHOOSE A DONATION AMOUNT</p>
                </td>
            </tr>
        </table>
        <form id="donationAmount" method="post" action="">
            <div id="divFullWidth">
                <table class="option-button-donation">
                    <tr>
                        <td>
                            <p class="pContent">Most popular donation options.</p>
                            <div class="switch-field">
                                <input type="radio" id="buttonA" name="donation_amount" value="100" />
                                <label for="buttonA">RM 100</label>
                                <input type="radio" id="buttonB" name="donation_amount" value="200" />
                                <label for="buttonB">RM 200</label>
                                <input type="radio" id="buttonC" name="donation_amount" value="300" />
                                <label for="buttonC">RM 300</label>
                                <input type="radio" id="buttonD" name="donation_amount" value="500" />
                                <label for="buttonD">RM 500</label>
                                <input type="radio" id="buttonE" name="donation_amount" value="1000" />
                                <label for="buttonE">RM 1000</label>
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="reminders" style="display: none;">
                    <p class="buttonContent" style="font-style: italic; text-align: center;">
                        Please select a donation amount from the buttons above.
                    </p>
                </div>
            </div>
            <table class="headerTitle">
                <tr>
                    <td>
                        <p class="pTitle">STEP 2 : GET CHARITY & PRODUCT SUGGESTIONS</p>
                    </td>
                </tr>
            </table>
           
            <div id="divFullWidth">
                <table class="option-button-donation">
                    <tr>
                        <td class="tdContentCenter">
                            <!-- <p><input type="checkbox" name="vegetarian" value="Vegetarian"> Suggest Vegetarian Products only</p> -->
                            <p class="buttonContent">
                                <button class="linkButton" onclick="get_suggestion(event);">CLICK TO GET CHARITY SUGGESTION</button>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="jtoken">
                <?= JHTML::_('form.token'); ?>
            </div>
        </form>
        <table id="step3_headerTitle" class="headerTitle" style="display: none;">
            <tr>
                <td>
                    <p class="pTitle">STEP 3: VIEW DONATION SUGGESTION & DONATE</p>
                </td>
            </tr>
        </table>
       
        <div id="divFullWidth">
            <div class="reminders" style="display: none;">
                <p class="buttonContent" style="font-style: italic; text-align: center;">
                    Please click the "Get Charity Suggestion" button above to see a suggested donation in this space.
                </p>
            </div>
            <div id="contentNeed" style="display: none;">
                <table id="tableDonate" class="table table-hover">
                    <thead>
                        <tr>
                            <th>Charity</th>
                            <th>Products</th>
                            <th>Quantity</th>
                            <th>Price Each (RM)</th>
                            <th>Amount (RM)</th>
                        </tr>
                    </thead>
                    <tbody id="inner_donation_table">
                        <tr>
                            <td colspan="5"></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" style="text-align:right;font-weight:bold;text-transform:uppercase;">My Donation (RM) : </td>
                            <td id="totalAllSum">0.00</td>
                        </tr>
                        <tr>
                            <td colspan="4"></td>
                            <td>
                                <button onclick="submit_donation_to_cart(event)">Donate Now</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div id="otherOptions" style="display: none;">
                <p>
                    <button class="linkPage linkButton" onclick="get_suggestion(event)">Get a different charity suggestion</button>
                        or
                    <a class="linkPage" href="/e-charity/e-charity-choose-charity.html">Choose my charity and products</a>
                </p>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        const jtoken = jQuery("#jtoken").find("input").serialize();
        let current_donation_data = {};
       
        function get_suggestion(e) {
            e.preventDefault(); // Prevent form submission
           
            let donationAmount = jQuery("input[name=donation_amount]:checked").val();
            let url = "/index.php?option=com_echarity&format=raw&task=api.get_suggestions&price="+donationAmount+"&"+jtoken;
           
            if(typeof donationAmount == 'undefined') {
                jQuery('.reminders, #step3_headerTitle').show();
                jQuery('#otherOptions, #contentNeed').hide();
                current_donation_data = {};
            }
           
            let inner_donation_table = '';

            jQuery.ajax({
                type: "GET",
                timeout: 10000,
                url: url,
                success: function (data) {
                    let dataResult = JSON.parse(data);
                    let charityID = "";
                    let charityName = "";
                    let sumTotal = 0.00;

                    jQuery.each(dataResult, function (key, value) {
                        charityID = value.charity_id;
                        charityName = value.charity_name;
                       
                        let productName = value.product_name;
                        let quantity = value.quantity;
                        let price = value.price;
                        let totalPerProduct = (quantity * price).toFixed(2);
                       
                        // // Calculation of GST and discount 15%
                        // let newPriceGST = (price * 1.06).toFixed(2); // GST
                        // let newPriceDiscount = (newPriceGST * 0.85).toFixed(2); // 15% discount
                        // let totalPerProduct = (quantity * newPriceDiscount).toFixed(2);
                        //
                        // value.price_gst = Number(newPriceGST);
                        // value.price_gst_with_discount = Number(newPriceDiscount);

                        inner_donation_table += `
                            <tr>
                                <td>${charityName}</td>
                                <td>${productName}</td>
                                <td class="quantity">${quantity}</td>
                                <td class="eachPrice">${price.toFixed(2)}</td>
                                <td class="eachTotal">${totalPerProduct}</td>
                            </tr>
                        `;
                       
                        sumTotal += Number(totalPerProduct);
                        dataResult[key] = value;
                    });

                    if (charityID === 0) {
                        // hide table contentNeed
                        jQuery('.reminders, #step3_headerTitle').show();
                        jQuery('#otherOptions, #contentNeed').hide();
                    } else {
                        jQuery('.reminders').hide();
                        jQuery('#step3_headerTitle, #otherOptions, #contentNeed').show();

                        jQuery('#inner_donation_table').html(inner_donation_table);
                       
                        //Update sumTotal html
                        jQuery('#totalAllSum').html(sumTotal.toFixed(2));
                    }
                   
                    current_donation_data = dataResult;
                },
                error: function (request, status, error) {
                    alert(request.responseText);
                }
            });
        }
       
        function submit_donation_to_cart(e) {
            e.preventDefault();
            if(jQuery.isEmptyObject(current_donation_data)) {
                return false;
            }
           
            console.log(current_donation_data);
           
            jQuery.ajax({
                type: "POST",
                timeout: 10000,
                url: "/index.php?option=com_echarity&format=raw&task=api.add_suggestions_to_cart&"+jtoken,
                data: current_donation_data,
                dataType: 'json',
                success: function (result) {
                    // console.log(result);
                    window.location.href = "/e-charity/products-range/checkout.html";
                },
                error: function (request, status, error) {
                    // alert(request.responseText);
                    alert("There was an issue with submitting your donation. Please try again later or contact an administrator.");
                }
            });
        }
       

        function getTotalSum() {
            let sum = 0;
            jQuery('td:nth-child(5)').each(function () {
                let value = Number(jQuery(this).html());
                if (!isNaN(value)) sum += value;
            });
            jQuery('#totalAllSum').html(sum.toFixed(2));
        }
    </script>
    {/source}


You can see the live version on here.

It happen when user choose the amount and click calculated. It should be automatically generated item within the range of chosen amount.

Anyone can guide me to solve this issue.
Thanks in advanced.