Show different content for each div on javascript manipulation-CodePudding

I'm changing some html via data-attribute on a button click, it works fine when there's only a div but when i have more than one div or multiple buttons inside of each div it only changes on the first element. I've tried to do a forEach but without sucess. On my console i can see the two div's but i can't get it to work by div. Here's my code:

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {
    console.log(index)

    var buttons = document.querySelectorAll(".form-button");

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){    
            var discount = getDiscount(this);
            let span = document.querySelector('.discount-amount')
            span.innerHTML = '<strong>'   discount  '</strong>'
        });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");  
        return val;
    }

});

<div >
<div><strong >38</strong>%</div>

<div > 
  <button  data-discount="38">Offer 1</button>
  <button  data-discount="50">Offer 2</button>
  <button  data-discount="22">Offer 3</button>
  <button  data-discount="88">Offer 4</button>
</div>
</div>

<div >
<div><strong >12</strong>%</div>

<div > 
  <button  data-discount="12">Offer 1</button>
  <button  data-discount="32">Offer 2</button>
  <button  data-discount="44">Offer 3</button>
  <button  data-discount="55">Offer 4</button>
</div>
</div>

Hope someone can help. Many thanks

CodePudding user response：

The querySelector for the spann will find the first since you're look at document.

You could use the index variable to search the discount-amount inside the current discounter:

let span = index.querySelector('.discount-amount')
span.innerHTML = '<strong>'   discount  '</strong>'

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {
    console.log(index)

    var buttons = index.querySelectorAll(".form-button");

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){    
            var discount = getDiscount(this);
            let span = index.querySelector('.discount-amount')
            span.innerHTML = '<strong>'   discount  '</strong>'
        });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");  
        return val;
    }

});

<div >
<div><strong >38</strong>%</div>

<div > 
  <button  data-discount="38">Offer 1</button>
  <button  data-discount="50">Offer 2</button>
  <button  data-discount="22">Offer 3</button>
  <button  data-discount="88">Offer 4</button>
</div>
</div>

<div >
<div><strong >12</strong>%</div>

<div > 
  <button  data-discount="12">Offer 1</button>
  <button  data-discount="32">Offer 2</button>
  <button  data-discount="44">Offer 3</button>
  <button  data-discount="55">Offer 4</button>
</div>
</div>