js click event handling, like counter

Question

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 class="like_list">
<div class="like"></div>
<div class="total">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 class="card_list_places">
            <div class="list_item">
              <img src="./assets/img/heh.png" alt="heh" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>NAGOYA</h6>
                </div>
                <div class="like_list lykas">
                  <div class="like"></div>
                  <div class="total">140</div>
                </div>
              </div>
              <div class="list_text">
                <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 class="button_list"><p class="see_more">SEE MORE</p></div>
            </div>
            <div class="list_item">
              <img src="./assets/img/snow.png" alt="snow" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>NIIGATA</h6>
                </div>
                <div class="like_list">
                  <div class="like"></div>
                  <div class="total">120</div>
                </div>
              </div>
              <div class="list_text">
                <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 class="button_list"><p class="see_more">SEE MORE</p></div>
            </div>
            <div class="list_item">
              <img src="./assets/img/sity.png" alt="sity" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>OSAKA</h6>
                </div>
                <div class="like_list">
                  <div class="like"></div>
                  <div class="total">77</div>
                </div>
              </div>
              <div class="list_text">
                <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 class="button_list"><p class="see_more">SEE MORE</p></div>
            </div>
            <div class="list_item">
              <img src="./assets/img/red.png" alt="red" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>SAITAMA</h6>
                </div>
                <div class="like_list">
                  <div class="like"></div>
                  <div class="total">240</div>
                </div>
              </div>
              <div class="list_text">
                <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 class="button_list">
                <p class="see_more">SEE MORE</p>
              </div>
            </div>
            <div class="list_item">
              <img src="./assets/img/sakura.png" alt="sakura" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>UENO</h6>
                </div>
                <div class="like_list">
                  <div class="like"></div>
                  <div class="total">93</div>
                </div>
              </div>
              <div class="list_text">
                <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 class="button_list">
                <p class="see_more">SEE MORE</p>
              </div>
            </div>
            <div class="list_item">
              <img src="./assets/img/salut.png" alt="salut" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>SHIBUYA</h6>
                </div>
                <div class="like_list">
                  <div class="like"></div>
                  <div class="total">57</div>
                </div>
              </div>
              <div class="list_text">
                <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 class="button_list">
                <p class="see_more">SEE MORE</p>
              </div>
            </div>
          </div>

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

Answer 1

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.

1. Link your vote buttons to a click event.
2. Determine if it is an up / down vote when it fires.
3. Get the current count and recalculate the count. Important: parseInt()
4. the value you pull from the DOM to calculate it.
5. 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 class="container">
  <div class="items">
    <img src="https://via.placeholder.com/300"> 
    <div clsss="voting">
      <button class="vote-btn up">+</button>
      <button class="vote-btn down">-</button>
    </div>
    <span class="counting">0</span>
  </div>

    <div class="items">
    <img src="https://via.placeholder.com/300"> 
    <div clsss="voting">
      <button class="vote-btn up">+</button>
      <button class="vote-btn down">-</button>
    </div>
    <span class="counting">0</span>
  </div>
</div>