Q:

How to specify the action attribute to specific input buttons?

I have a form in which I have 2 buttons which increase and decrease the values entered by the user. The form has an action attribute which sends all the data of the form to another PHP file. When I try to press the button, it just directs me to that page instead of increasing the value. I want the buttons to increase the value and when the submit button is clicked, the page should send all the data to the other PHP page.
Thanks In Advance!!!

the buttons are images
I have not included the PHP code

My HTML Code Snippet-
<form method="POST" action="cart.php">
  <div class="divStyle">
    <img src="img.png" height="100px" width="150px">
    <br>
    <?php echo $_SESSION['book1']; ?>
    <br><br>
    <?php echo $price1; ?>
    <br>
    <div class="inputStyle">
      <input type="image" src="minus.png" width="50px" height="50px" id="minus1" name="minus1"><input type="number" type="button" min="0" id="Q1" name="Q1" placeholder="Enter Quantity"><input type="image" src="plus.png" height="50px" width="50px" id="plus1" name="plus1">
      <br>
    </div>
  </div>

  <div class="divStyle">
    <img src="img.png" height="100px" width="150px">
    <br>
    <?php echo $_SESSION['book2']; ?>
    <br><br>
    <?php echo $price2; ?>
    <br>
    <div class="inputStyle">
      <input type="image" src="minus.png" width="50px" height="50px" id="minus2" name="minus2"><input type="number" type="button" min="0" id="Q2" name="Q2" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus2" name="plus2">
      <br>
    </div>
  </div>

  <div class="divStyle">
    <img src="img.png" height="100px" width="150px">
    <br>
    <?php echo $_SESSION['book3']; ?>
    <br><br>
    <?php echo $price3; ?>
    <br>
    <div class="inputStyle">
      <input type="image" src="minus.png" width="50px" height="50px" id="minus3" name="minus3"><input type="number" type="button" min="0" id="Q3" name="Q3" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus3" name="plus3">
      <br>
    </div>
  </div>
  <br>
  <br>
<input type="submit" id="submit1" name="submit1">
</form>

My Javascript Code-
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('#plus1').click( function() {
            var counter = $('#Q1').val();
            if (counter>= 0 && counter<5) {
            counter++ ;
            $('#Q1').val(counter);
        }
    });
});

$(document).ready(function(){
        $('#plus2').click( function() {
            var counter = $('#Q2').val();
            if (counter>= 0 && counter<5) {
            counter++ ;
            $('#Q2').val(counter);
        }
    });
});

$(document).ready(function(){
        $('#plus3').click( function() {
            var counter = $('#Q3').val();
            if (counter>= 0 && counter<5) {
            counter++ ;
            $('#Q3').val(counter);
        }
    });
});

$(document).ready(function(){
        $('#minus1').click( function() {
            var counter = $('#Q1').val();
            if(counter>0 && counter<6){
            counter-- ;
            $('#Q1').val(counter);
        }
    });
});

$(document).ready(function(){
        $('#minus2').click( function() {
            var counter = $('#Q2').val();
            if(counter>0 && counter<6){
            counter-- ;
            $('#Q2').val(counter);
        }
    });
});

$(document).ready(function(){
        $('#minus3').click( function() {
            var counter = $('#Q3').val();
            if(counter>0 && counter<6){
            counter-- ;
            $('#Q3').val(counter);
        }
    });
});
</script>

A:

Maybe Like This:

$(document).ready(function(){
 $('.cls-btn-plus-minus').click(function(){
  var cur_val = $(this).parent().find('.cls-q').val();
  cur_val = parseInt(cur_val)||0;
    var role = $(this).attr('role');

  if(role == 'plus'){
   if(cur_val>= 0 && cur_val<5) {
     cur_val++;
     $(this).parent().find('.cls-q').val(cur_val);
   }
  }

  if(role == 'minus'){
   if(cur_val> 0 && cur_val<6) {
     cur_val--;
     $(this).parent().find('.cls-q').val(cur_val);
   }
  }

 });
});
.cls-btn-plus-minus{
   height:50px;
   width:50px;
   cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="cart.php">
  <div class="divStyle">
    <!--img src="img.png" height="100px" width="150px"-->
    <br>
    book1
    <br><br>
    price1
    <br>
    <div class="inputStyle">
      <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">  
      <input type="number" class="cls-q" min="0" id="Q1" name="Q1" placeholder="Enter Quantity">
            <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
      <br>
    </div>
  </div>

  <div class="divStyle">
    <!--img src="img.png" height="100px" width="150px"-->
    <br>
    book2
    <br><br>
    price2
    <br>
    <div class="inputStyle">
            <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">  
      <input type="number" class="cls-q" min="0" id="Q2" name="Q2" placeholder="Enter Quantity">
      <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
      <br>
    </div>
  </div>

  <div class="divStyle">
    <!--img src="img.png" height="100px" width="150px"-->
    <br>
    book
    <br><br>
    price3
    <br>
    <div class="inputStyle">
            <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">  
      <input type="number" class="cls-q" min="0" id="Q3" name="Q3" placeholder="Enter Quantity">
      <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
      <br>
    </div>
  </div>
  <br>
  <br>
<input type="submit" id="submit1" name="submit1" value="GO">
</form>

