js click event handling, like counter-CodePudding

I have six stylized blocks, each with a like counter. Three div tags, of which the last two are working. When writing code in js, when you click on the like -1 button, only the first block (card) is counted, while the other five remain unchanged. How can I make the code also work when you click like in other blocks, and display - 1

<div >
<div ></div>
<div >57</div>

const btn = document.querySelector('.like');
let like = true,
    likeCount = document.querySelector('.total').innerHTML;

btn.addEventListener('click', () => {
  likeCount = like ?   likeCount : --likeCount;
  like = !like;
  document.querySelector('.total').innerHTML = likeCount;
});

other html code

         <div >
            <div >
              <img src="./assets/img/heh.png" alt="heh" />
              <div >
                <div >
                  <h6>NAGOYA</h6>
                </div>
                <div >
                  <div ></div>
                  <div >140</div>
                </div>
              </div>
              <div >
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div ><p >SEE MORE</p></div>
            </div>
            <div >
              <img src="./assets/img/snow.png" alt="snow" />
              <div >
                <div >
                  <h6>NIIGATA</h6>
                </div>
                <div >
                  <div ></div>
                  <div >120</div>
                </div>
              </div>
              <div >
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div ><p >SEE MORE</p></div>
            </div>
            <div >
              <img src="./assets/img/sity.png" alt="sity" />
              <div >
                <div >
                  <h6>OSAKA</h6>
                </div>
                <div >
                  <div ></div>
                  <div >77</div>
                </div>
              </div>
              <div >
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div ><p >SEE MORE</p></div>
            </div>
            <div >
              <img src="./assets/img/red.png" alt="red" />
              <div >
                <div >
                  <h6>SAITAMA</h6>
                </div>
                <div >
                  <div ></div>
                  <div >240</div>
                </div>
              </div>
              <div >
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div >
                <p >SEE MORE</p>
              </div>
            </div>
            <div >
              <img src="./assets/img/sakura.png" alt="sakura" />
              <div >
                <div >
                  <h6>UENO</h6>
                </div>
                <div >
                  <div ></div>
                  <div >93</div>
                </div>
              </div>
              <div >
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div >
                <p >SEE MORE</p>
              </div>
            </div>
            <div >
              <img src="./assets/img/salut.png" alt="salut" />
              <div >
                <div >
                  <h6>SHIBUYA</h6>
                </div>
                <div >
                  <div ></div>
                  <div >57</div>
                </div>
              </div>
              <div >
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div >
                <p >SEE MORE</p>
              </div>
            </div>
          </div>

screenshot for clarity, the 1st block works, because and by design, in the rest the substrate is hidden

CodePudding user response：

I am still missing some parts of your code. But I have understood your goal. For this reason, I have written a general example to make it clear to you what you need to pay attention to in order to get your code to work.

Link your vote buttons to a click event.
Determine if it is an up / down vote when it fires.
Get the current count and recalculate the count. Important: parseInt()
the value you pull from the DOM to calculate it.
update the counting element

That's it!

const btns = document.querySelectorAll('.vote-btn');

for (let i = 0; i < btns.length; i  ) {
  btns[i].addEventListener('click', (ev) => {
    const direction = ev.target.classList.contains('up') ? true : false;
    const span = ev.target.parentElement.parentElement.querySelector('span');
    let counting = span.innerHTML
    counting = parseInt(counting)    (direction ?  1 : -1) 
    span.innerHTML = counting
  })
}

.container {
  display: flex;
  gap: 20px;
}
.vote-btn {
  width: 100px;
  height:30px;
  
}

<div >
  <div >
    <img src="https://via.placeholder.com/300"> 
    <div clsss="voting">
      <button > </button>
      <button >-</button>
    </div>
    <span >0</span>
  </div>

    <div >
    <img src="https://via.placeholder.com/300"> 
    <div clsss="voting">
      <button > </button>
      <button >-</button>
    </div>
    <span >0</span>
  </div>
</div>