Detect button click on form item

Question

I have a list of store items. Each item is showing its values as a form.

<?php       
if($statement->execute())
{
    $result = $statement->fetchAll();
    $output = '';
    foreach($result as $row)
    {
        $output .= '
            <div class="col-md-3" style="margin-top:12px;">  
            <div class="item-content" align="center">
            <div class="img-container">
                <img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
                <h4 class="text-info">'.$row["name"].'</h4>
                <h4 class="text-danger">$ '.$row["price"] .'</h4>
                <input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" style="text-align:right;"/>
                <input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
                <input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
        
                <div class="input-group">
                <span class="input-group-btn">
                <button type="button" class="btn btn-danger btn-number" name="restar"  id="'.$row["id"].'" " >
                <span class="glyphicon glyphicon-minus"></span>
                </button>
                </span>
                   
                <span class="input-group-btn">
                <button type="button" class="btn btn-success btn-number" name="sumar" id="sumar"">
                <span class="glyphicon glyphicon-plus"></span>
                </button>
                </span>
                </div>          
  
                <input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
                 </div>
                 </div>
             </div>
        ';
    }
}
?>

I need to identify when the user clicks on button 'restar' from a certain form item.

This is my current script, but it doesn't launch the expected alert.

<script type="text/javascript">
    $(document).ready(function(){
        var product_id = $(this).attr("id");
        $('#restar'+'product_id+').on('click', function(event) {
            alert("ssssspp2");
        });
    });
</script>

Answer 1

Use class for describing similar objects, eg:

 $('.js-some-btn').click(function() { console.log("I'm button"); console.log("My id is " + $(this).attr('id')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn btn-success btn-number js-some-btn" name="sumar1" id="id1">btn 1</button> <button type="button" class="btn btn-success btn-number js-some-btn" name="sumar2" id="id2">btn 2</button>

This approach allows you to write only one click handler for all buttons with provided class.