how to give seperate id to a list of buttons in javascript?

19
November 22, 2020, at 6:50 PM

I have been posting this same issue for last 2-3 days , nobody gave a proper solution.

Problem:

I have set of increment and decrement button in my shopping cart page to manage products quantity before checkout. I want all my decrease button to be disabled if the quantity is equals to 1. I have used set of IF statements to do that. But, those IF conditions are only working when my cart page contains one item at a time. I have founded the issue but getting no solution for that. The problem is that, the button id is same on each cases so it override one another. So, I want to give different different id's when each cart item is displayed on the page with - and + buttons. How to make my code like that ?

Here's my code for both buttons and IF statements.

 {{#each products}}
            <tr>
                <td><img src="/product-images/{{this.product._id}}.jpg" 
style="width:70px;height:70px" alt=""></td>
                <td>{{this.product.Name}}</td>
                <td>Rs.{{this.product.Price}}</td>

                <td>
                    <button class="btn btn-info mr-3 cart-item-count " id="button(-)"
                        
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',-1)">-</button>
                    <span id="{{this.product._id}}">{{this.quantity}}</span>
                    <button class="btn btn-info ml-3 cart-item-count" id="button(+)"
                        
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',1)">+</button>
                </td>
                <td>
                    <button type="button" class="btn btn-danger">Remove</button>
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <hr>
    <div class="float-right pr-5 pt-5">
        <h3 style="text-align:center">Total Rs. <span id="total">{{total}}</span></h3>
        <a href="/place-order" class="btn btn-primary mt-3" style="width:100%">Place Order</a>
    </div>
</div>
</section>
{{#each products}}
<h1 id="Quantity">{{this.quantity}}</h1>
{{/each}}
<script>
let Quantity = parseInt(document.getElementById('Quantity').innerHTML);
//console.log(Quantity)
if (Quantity == 1) {
    document.getElementById("button(-)").disabled = true
} else {
    document.getElementById("button(-)").disabled = false
}
if (Quantity == 10) {
    document.getElementById("button(+)").disabled = true
} else {
    document.getElementById("button(+)").disabled = false
}
function changeQuantity(cartId, proId, userId, count) {
    count = parseInt(count)
    let quantity = parseInt(document.getElementById(proId).innerHTML)
    let qty = quantity + count
    //console.log(qty)
    if (qty > 1) {
        document.getElementById('button(-)').disabled = false
    } else if (qty == 1 || qty == 10) {
        document.getElementById('button(-)').disabled = true
    }
    if (qty == 10) {
        document.getElementById('button(+)').disabled = true
    } else {
        document.getElementById('button(+)').disabled = false
    }
    $.ajax({
        url: '/change-product-quantity',
        data: {
            cart: cartId,
            product: proId,
            user: userId,
            count: count,
            quantity: qty
        },
        method: 'post',
        success: (response) => {
            document.getElementById(proId).innerHTML = quantity + count
            document.getElementById('total').innerHTML = response.total
            location.reload()
        }
})
}

Note: value of quantity in the above code is taken from Mongodb using Handlebars.

As you can see this image that, the disabling effect only applied to first row of button not the rest. This has to be solved .

Expected output:

All the - button must be disabled while page loads.

Thank You:

Answer 1

Add {{@index}} inside your id attributes

h/t How to get index in Handlebars each helper?

READ ALSO
Unable to use $inc to update and increement prorperty in mongo db?

Unable to use $inc to update and increement prorperty in mongo db?

I have a collection which has two property id and sequence_valueI am using it for auto-increment now if I want to increase its value then I am not able to do

49
Is there a way i can have a connect object to an oracle client in node js?

Is there a way i can have a connect object to an oracle client in node js?

I created an abstraction so i can call for different tables in the schema but I am having issues

24
Looking for an efficient way to implement timed web scraping for a discord bot

Looking for an efficient way to implement timed web scraping for a discord bot

What I am trying to implement is that after some interval of time, it checks the MarketWatch site to see if there's a new link in the news finder section of the latest news page (using the scrapeArticle function) and if there is a new link (article) it will send it into the discord...

43