How to get the value of buttons created through a foreach loop in php/Laravel?

Question

Personal I have an array with sizes of a product, follow the example of the array:

And for each size I create a button through a foreach, follows excerpt from the code where I create the buttons:

<div class="item item-stock">
    <label for="stock">Tamanho: </label>
    @foreach($stocks as $stock)
        <button id="stock" class="btn-stock" value="{{ $stock->id }}" data-quantity="{{ $stock->quantity }}" onclick="verifyStock();">{{ $stock->unit->name }}</button>
    @endforeach
</div>

For me to proceed with my application I need to check if the product has stock and to check this I need the quantity, information that already comes in the array, and I’m trying to play it in a script through an Attributes date, but the problem is that no matter which button I click on it always comes the value of the first element of the array... and as up there I already did a foreach was to be coming right, wasn’t it? Follow below my function js:

$(document).ready(function() {
    verifyStock();
});

function verifyStock() {
    var quantity = $('#stock').val();
    // var quantity = $('#stock').attr('data-quantity');
    console.log(quantity);
}

Could someone explain to me what’s missing, where it’s missing and why?

Answer 1

I believe the error is occurring because you are trying to get the value from an ID, the problem is that in HTML the ID is unique, and when you foreach, you are iterating more elements with the "stock" ID. A simple solution would be to send the element itself with this, and fetch the values you need by replying it.

    <button class="btn-stock" value="{{ $stock->id }}" data-quantity="{{ $stock->quantity }}" onclick="verifyStock(this);">{{ $stock->unit->name }}</button>

and in the script:

function verifyStock(response) {
    console.log(response);
}

From there you can manipulate the Sponse, which will be the button clicked, and return the values of 'data', 'value' and everything inside this button

Answer 2

The problem is in your code

$(document).ready(function() {
    verifyStock();
});

function verifyStock() {
    var quantity = $('#stock').val();
    // var quantity = $('#stock').attr('data-quantity');
    console.log(quantity);
}

note that Voce is looking for the value of the stock id, for js there are several ids stack because you rode in foreach dai it will take the value of the first element with that id

The solution would be to put the id together and send to the js function like this

<div class="item item-stock">
    <label for="stock">Tamanho: </label>
    @foreach($stocks as $stock)
        <button id="stock{{$stock->id}}" class="btn-stock" value="{{ $stock->id }}" data-quantity="{{ $stock->quantity }}" onclick="verifyStock({{ $stock->id }});">{{ $stock->unit->name }}</button>
    @endforeach
</div>

js

$(document).ready(function() {
        verifyStock();
    });

    function verifyStock(id) {
        var quantity = $('#stock'+id).val();
        // var quantity = $('#stock').attr('data-quantity');
        console.log(quantity);
    }