++ & — issue using jquery for same Submit button for Cart Product quantity(Php)

I have some problems during working with cart product ++ and — using jquery and form submit on button click also but only first cart product working correctly and another not working because Id issue Please reffer my code as below :

$(document).ready(function() {
  $('.plus').click(function() {
    var num = parseInt($('#quantity').val());
    if (num == 10) {
      num = 10;
    } else {
      num++;
    }
    $('#quantity').val(num);
  });
  $('.minus').click(function() {
    var num = parseInt($('#quantity').val());
    if (num == 1) {
      num = 1;
    } else {
      num--;
    }
    $('#quantity').val(num);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form method='post' action=''>
  <input type='hidden' name='code' value="1234" />
  <input type='hidden' name='action' value="change" />
  <div class="qty input-group pb-1">
    <span class="input-group-btn">
    <button class="btn btn-theme-round btn-number minus" type="button">-</button>
  </span>
    <input type="text" value="0" name="quantity" id="quantity_1234" class="quantity">
    <span class="input-group-btn">
      <button class="btn btn-theme-round btn-number plus" type="button">+</button>
    </span>
  </div>
</form>
<form method='post' action=''>
  <input type='hidden' name='code' value="5678" />
  <input type='hidden' name='action' value="change" />
  <div class="qty input-group pb-1">
    <span class="input-group-btn">
    <button class="btn btn-theme-round btn-number minus" type="button">-</button>
  </span>
    <input type="text" value="0" name="quantity" id="quantity_5678" class="quantity">
    <span class="input-group-btn">
      <button class="btn btn-theme-round btn-number plus" type="button">+</button>
    </span>
  </div>
</form>

Answer

You have issue with ID and Class

If you want to submit when they click, you need to do this:

Please note I removed all stuff from the plus/minus buttons and moved the ID to class

$(function() {
  $('.btn-number').click(function() {
    const $form = $(this).closest("form");
    var num = +$('.quantity',$form).val();
    num += $(this).hasClass("plus") ? 1 : -1; // which button?
    if (num >= 10) {
      num = 10;
    } else if (num <= 0) {
      num = 0;
    }
    $('.quantity',$form).val(num);
    // $form.submit(); // uncomment to submit
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form method='post' action=''>
  <input type='hidden' name='code' value="1234" />
  <input type='hidden' name='action' value="change" />
  <div class="qty input-group pb-1">
    <span class="input-group-btn">
    <button class="btn btn-theme-round btn-number minus" type="button">-</button>
  </span>
    <input type="text" value="0" name="quantity" id="quantity_1234" class="quantity">
    <span class="input-group-btn">
      <button class="btn btn-theme-round btn-number plus" type="button">+</button>
    </span>
  </div>
</form>
<form method='post' action=''>
  <input type='hidden' name='code' value="5678" />
  <input type='hidden' name='action' value="change" />
  <div class="qty input-group pb-1">
    <span class="input-group-btn">
    <button class="btn btn-theme-round btn-number minus" type="button">-</button>
  </span>
    <input type="text" value="0" name="quantity" id="quantity_5678" class="quantity">
    <span class="input-group-btn">
      <button class="btn btn-theme-round btn-number plus" type="button">+</button>
    </span>
  </div>
</form>