? ?? JavaScript? ???? ??? ???? ??? ??? ??? ? ???? ? ?? ???? ???? ??? ???? ?? ??? ???. ???? ??? ??? ???? ??? ?? ? DOM ??? ???? ??? ???? ?????? ???? ??? ???? ???? ???? ???? ?? ?? ??? ????? ????. ??? ???? HTML ??? ???? ?? ???? ?????.

????? ???????? ???? ?? ??? ???? ??? ??? ???? ?? ??? ????. ???? ??? ???? ?? ??? ?? ?? JavaScript ??? ? ?? ???? ????? ????. ?? ????? ??? ? ?? ??? ???? ?? ??? ???? ???? ?? ?????. ? ????? ? ??? ???? ?? ????? ??? ??? ???? ?????.

?? ??

?? ????? querySelectorAll? ???? ?? ??? ????? ??? ??? ??? ?????. ?? ??? ??? ????.

1. ??? ??: ??? ??? ??? ??(?: .pqt-plus1)? ???? ???? ? ?? ??? ?????.
2. ?? ??: ???? ??? ??? ????? ?? ????? ???? ?? ??? ?????.

???: ??? ?? ? DOM ??

?? ??? ???? ??? ??? DOM ??? ???? ????. ? ?? ??? ???? ? ??? ??? ???? ??? ??? ???? ??? ?? ?? ???? ?????.

HTML ?? ???:

??, ???? ??? HTML ??? ????? ???. ??? ???? ?? ???? ???? ?? ??? ??? ??????. ??? ???? ?? ???? ?? ???? ?? data ??? ?????. ??? HTML ??? div? ?? ???? ?? ? ?? ??? ???????.

 <div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm ?? 12? btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ??>
    <span class="????">
      <span class="??">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ??>
  </button></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm ?? 12? btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ??>
    <span class="????">
      <span class="??">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ??>
  </button></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm ?? 12? btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ??>
    <span class="????">
      <span class="??">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ??>
  </button></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm ?? 12? btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ??>
    <span class="????">
      <span class="??">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ??>
  </button></button></span>
</div>

?????? ??:

 document.querySelectorAll(".btn-sm").forEach(btn => {
  btn.addEventListener('??', e => {
    let total = e.target.closest('.pls-moins').querySelector('.add');
    total.textContent = Math.max(0,parseInt(total.textContent, 10)parseInt(e.currentTarget.dataset.inc, 10));
  });
});

?? ??:

1. document.querySelectorAll(".btn-sm").forEach(btn => { ... }); : ??? ??? .btn-sm? ??? ?? ???? ? ??? ??? ???? ?????.
2. e.target.closest('.pls-moins') : e.target? ???? ???? ?????(?: ??? ??). ?? ???('.pls-moins') ???? .pls-moins? ?? ??? ?? ???? ?????.
3. .querySelector('.add') : ??? .pls-moins ?? ??? ??? ???? ??? ??? . added? ??? ????.
4. parseInt(total.textContent, 10) : ??? ???? ?? ??? ?????. 10? ???? ?????.
5. parseInt(e.currentTarget.dataset.inc, 10) : ??? ??? data-inc ?? ?? ???? ??? ?????. e.currentTarget? ??? ???? ???? ??(?: ??)? ?????.
6. Math.max(0, ...) : ??? 0?? ?? ??? ?????.

??

??? ?? ? DOM ??? ???? ?? ??? ???? ?? ?? ???? ?? ??? ?? JavaScript ??? ??? ? ????. ? ?? ??? ??? ?? ????? ?? ?? ??? ?? ? ??? ? ?? ????. ? ???? ????? ??? HTML ??? ???? ?? ?????. ??? ??? ??? ??? ???? ?? ?? ??? ??? ??? ??? ???? ?? ??? ?????. ????? HTML ??? ???? ?????.

? ??? ? ?? ???? ???? JavaScript ???? ?? ?? ? ?? ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!