creating shopping affection using jquery

Question

**so I’m making a shopping cart and I’m with the following poblema as you can see the low,when I have only one item in the cart I can add with button + and remove with button - *? **the poblema comes When I have more than one item in the cart because item q is not dynamic, it has the same class as the others, when I click on item 1 it changes item 1 and 2, wanted to know if there’s any way I can change only item 1 without affecting the others **

$('#cart button').on('click', function(e){
        e.preventDefault();
        
        let qtt = parseInt($('.qtt').val()); //dinamico
        let action = $(this).attr('data-action');//não dinamico
        let uni = $('input:hidden[name=uni]').val();//dinamico
        let id = $('.id_cp').val();//dinamico
    
        if(action == 'menos') {
            if(qtt-1 >= 1) {
                qtt = qtt - 1;  
            }
        }else if (action == 'mais') {
            qtt = qtt + 1;
        }
    
        $('.qtt').val(qtt);
    
        var real = qtt*uni;
    
        $('.real').val(real);

<h4 class="form-group form-inline" id="cart">
                    <input type="hidden" class="id_cp" value="<?= $item['id']; ?>">
                    <button class="btn btn-default" data-action="menos">-</button>
                    <input type="text" class="form-control qtt" style="height:40px;width: 50px!important;text-align: center;" value="<?= $item['qt']; ?>">
                    <button class="btn btn-default" data-action="mais">+</button>
                </h4>

Answer 1

$('#cart button').on('click', function(e) {
  e.preventDefault();

  let qtt = +$(this).siblings('.qtt').val();
  let action = $(this).attr('data-action');
  let id = $(this).siblings('.id_cp').val();

  if (action == 'menos' && qtt >= 1) {
    qtt--;  
  } else if (action == 'mais') {
    qtt++;
  }
  $(this).siblings('.qtt').val(qtt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="cart">
    <h4 class="form-group form-inline">
      <input type="hidden" class="id_cp" value="1" />
      <button class="btn btn-default" data-action="menos">-</button>
      <input type="text" class="form-control qtt" style="height:40px;width: 50px!important;text-align: center;" value="2">
      <button class="btn btn-default" data-action="mais">+</button>
    </h4>
    <h4 class="form-group form-inline">
      <input type="hidden" class="id_cp" value="3" />
      <button class="btn btn-default" data-action="menos">-</button>
      <input type="text" class="form-control qtt" style="height:40px;width: 50px!important;text-align: center;" value="2">
      <button class="btn btn-default" data-action="mais">+</button>
    </h4>
    <h4 class="form-group form-inline">
      <input type="hidden" class="id_cp" value="2" />
      <button class="btn btn-default" data-action="menos">-</button>
      <input type="text" class="form-control qtt" style="height:40px;width: 50px!important;text-align: center;" value="2">
      <button class="btn btn-default" data-action="mais">+</button>
    </h4>
</div>