javascript - change values for each object with a button

Question

I have an array map with objects in JavaScript, the map consists of a title and list items, for list item Amount I use add and minus button, to change values in Amount, how can I change the values in the HTML but for each one object only?

    const outputHtml = matches => {
        if (matches.length > 0) {
            const lookUpItem = matches.map(match => `
            <div class="foodInfo">
                    <h4 id="title">${match.foodDesc}</h4>
                    <small><span class="foodDetails">
                        <li>Protein: ${match.Protein} g</li>
                        <li>Calories: ${match.Calories} cals</li>
                        <li>Total Fat: ${match.Fat} g</li>
                        <li><button onclick="minus()" id="minus">-</button>
                            <span id="amount">Amount: <span id="amountNumber">${match.amount1}</span> / ${match.msreDesc1} </span>
                            <button onclick="add()" id="add">+</button> </li>
                        <button onclick="submit()" id="submit">Add to Diary</button>
                    </span></small>
            </div>
            `
    ).join('');
            itemList.innerHTML = lookUpItem;
        }
    }

function add() {
    {
      const amountNum = document.getElementById('amountNumber');
      console.log(amountNum.innerText)
  }
}

question from:https://stackoverflow.com/questions/65920690/change-values-for-each-object-with-a-button

Answer 1

The map function also has an index value. Use that to create unique ID values.

    const outputHtml = matches => {
        if (matches.length > 0) {
            const lookUpItem = matches.map((match, index) => `
            <div class="foodInfo">
                    <h4 id="title">${match.foodDesc}</h4>
                    <small><span class="foodDetails">
                        <li>Protein: ${match.Protein} g</li>
                        <li>Calories: ${match.Calories} cals</li>
                        <li>Total Fat: ${match.Fat} g</li>
                        <li><button onclick="minus('amountNumber_${index}')" id="minus_${index}">-</button>
                            <span id="amount">Amount: <span id="amountNumber_${index}">${match.amount1}</span> / ${match.msreDesc1} </span>
                            <button onclick="add('amountNumber_${index}')" id="add_${index}">+</button> </li>
                        <button onclick="submit()" id="submit">Add to Diary</button>
                    </span></small>
            </div>
            `
    ).join('');
            itemList.innerHTML = lookUpItem;
        }
    }
    
    

function add(el) {

    amountNum = parseInt(document.getElementById(el)) + 1;

    document.getElementById(el).innerText = amountNum;

    console.log(amountNum.innerText)
}