getInfo always receiving the same information. How to resolve?

Question

I get a PHP variable and use the foreach to display all items. Each item has multiple specifications, each specification has a id.

The link (<a>) when clicked calls the Javascript function getInfo passing the ids of each of the specifications that interests me and does not redirect to any page.

The function getInfo access the information using the getElementById(id).innerHTML and stores them in a variable. This function is to add products to a wish list using Localstorage.

The problem is when I click and call the function getInfo: the same information is always given.

I believe that because the foreach always produce the same ids, Javascript reads only the first and sends regardless of which foreach is calling the getInfo. How can I fix this?

Code:

                               @foreach($announcements as $announcement)
                                    <tr>
                                        <td class=""><strong id="manufacturer">{{ $announcement->getProductRelation->prod_manufacturer }}</strong></td>
                                        <td class="store-text"><small id="model">{{ $announcement->getProductRelation->prod_model }}</small></td>
                                        <td class="store-text text-center max-row-height"><small id="description">{{ $announcement->getProductRelation->prod_description }}</small></td>
                                        <td class="store-text text-center"><small id="price">R$ {{ $announcement->announcement_price }}</small></td>
                                        <td>
                                            <ul class="list-unstyled my-0 mx-0 py-0 px-0 text-center store-text ">
                                                <li><small><strong id="store-name">{{ $announcement->getShopkeeperRelation->store_name }}</strong></small></li>
                                                <li><small id="store-adress">{{ $announcement->getShopkeeperRelation->store_adress }}</small></li>
                                                <li>
                                                    <small>
                                                        @if(!empty($announcement->getShopkeeperRelation->store_location))
                                                        <a href="javascript:openGoogleMaps('{{ $announcement->getShopkeeperRelation->store_location }}')">
                                                            See on Map
                                                        </a>
                                                        @endif
                                                    </small>
                                                </li>
                                                <li><small id="store-phone">{{ $announcement->getShopkeeperRelation->store_phone1}}</small></li>
                                                <li><small>{{ $announcement->getShopkeeperRelation->store_phone2}}</small></li>
                                            </ul>
                                        </td>
                                        <td>
                                            <div class="shop-list-call text-center">
                                                <a class="" onclick="getInfo('manufacturer','model','description','price','store-name','store-adress','store-phone');" href="#">
                                                    <img class="shop-list-icon" src="{{ asset('storage/web-icons/shop-list.png') }}" alt=""/>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

Code for getInfo function:

function getInfo(manufacturer,model,description,price,store_name,store_adress,store_phone) {
    var manufacturer = document.getElementById(manufacturer).innerHTML;
    var model = document.getElementById(model).innerHTML;
    var description = document.getElementById(description).innerHTML;
    var price = document.getElementById(price).innerHTML;
    var store_name = document.getElementById(store_name).innerHTML;
    var store_adress = document.getElementById(store_adress).innerHTML;
    var store_phone = document.getElementById(store_phone).innerHTML;
    var inCart = 0;
    let products = [
        {
            manufacturer,
            model,
            description,
            price,
            store_name,
            store_adress,
            store_phone,
            inCart,
        },
    ];
    addToCart(products); 
}

Answer 1

I could think of something like that, but I can’t test it now. Take a look if it helps. An observation, it may be that in the fields type number in the place of being field1,field2, the value is adding, has to check if this will not happen.

@php($count=0)
@foreach($announcements as $announcement)
@php($count++)
<tr>
    <td class=""><strong id="manufacturer_{{ $count }}">{{ $announcement->getProductRelation->prod_manufacturer }}</strong></td>
    <td class="store-text"><small id="model_{{ $count }}">{{ $announcement->getProductRelation->prod_model }}</small></td>
    <td class="store-text text-center max-row-height"><small id="description_{{ $count }}">{{ $announcement->getProductRelation->prod_description }}</small></td>
    <td class="store-text text-center"><small id="price_{{ $count }}">R$ {{ $announcement->announcement_price }}</small></td>
    <td>
        <ul class="list-unstyled my-0 mx-0 py-0 px-0 text-center store-text ">
            <li><small><strong id="store-name_{{ $count }}">{{ $announcement->getShopkeeperRelation->store_name }}</strong></small></li>
            <li><small id="store-adress_{{ $count }}">{{ $announcement->getShopkeeperRelation->store_adress }}</small></li>
            <li>
                <small>
                    @if(!empty($announcement->getShopkeeperRelation->store_location))
                    <a href="javascript:openGoogleMaps('{{ $announcement->getShopkeeperRelation->store_location }}')">
                        See on Map
                    </a>
                    @endif
                </small>
            </li>
            <li><small id="store-phone_{{ $count }}">{{ $announcement->getShopkeeperRelation->store_phone1}}</small></li>
            <li><small>{{ $announcement->getShopkeeperRelation->store_phone2}}</small></li>
        </ul>
    </td>
    <td>
        <div class="shop-list-call text-center">
            <a class="" onclick="getInfo({{ $count }});" href="#">
                <img class="shop-list-icon" src="{{ asset('storage/web-icons/shop-list.png') }}" alt=""/>
            </a>
        </div>
    </td>
</tr>
@endforeach


function getInfo(count) {
    var manufacturer = document.getElementById('manufacturer_'+count).innerHTML;
    var model = document.getElementById('model_'+count).innerHTML;
    var description = document.getElementById('description_'+count).innerHTML;
    var price = document.getElementById('price_'+count).innerHTML;
    var store_name = document.getElementById('store_name_'+count).innerHTML;
    var store_adress = document.getElementById('store_adress_'+count).innerHTML;
    var store_phone = document.getElementById('store_phone_'+count).innerHTML;
    var inCart = 0;
    let products = [
        {
            manufacturer,
            model,
            description,
            price,
            store_name,
            store_adress,
            store_phone,
            inCart,
        },

        
    ];
            addToCart(products); 
}