заполнить несколько экземпляров одного и того же #DIV

Question

У меня есть таблица, созданная с использованием PHP.

как таблица заселение с выхода PHP, он создает несколько экземпляров этого:

<td> 
<div id="costSpin"> 
    <strong><? = $cost ?></strong><br> 
</div> 
</td> 

Я использую этот costSpin DIV в любое время кто-то обновляет что-то на странице - они видят немного вертушку как освежает стоимость ,

Когда вызывает скрипт для обновления цен, это становится действовавшим:

$("#costSpin").load("spinner.html"); 

    $.ajax({ 
     //code to refresh... 
    }); 

Сладким. Это работает. Моя единственная проблема заключается в том, что если итоговая таблица имеет 10 строк, то только FIRST-строка показывает счетчик.

<td> 
<div id="costSpin"> 
    <strong><? = $cost ?></strong><br> <!-- spinner works --> 
</div> 
</td><td> 
<div id="costSpin"> 
    <strong><? = $cost ?></strong><br> <!-- spinner doesn't work --> 
</div> 
</td><td> 
<div id="costSpin"> 
    <strong><? = $cost ?></strong><br> <!-- spinner doesn't work --> 
</div> 
</td><td> 
<div id="costSpin"> 
    <strong><? = $cost ?></strong><br> <!-- spinner doesn't work --> 
</div> 
</td> 

Я предположить, что это потому, что <div> может быть использован только один раз? Я не уверен, что вызывает это. Я надеялся, что я могу получить счетчик, чтобы загрузить его в КАЖДЫЙ из <div>. Что я делаю не так?

Update

Поскольку заполнение таблиц с PHP является довольно обычным делом, в том случае, если это поможет кому-то, вот окончательный код, который я использовал:

$ х представляет собой уникальный идентификатор, который растет с каждым строка, которая создана ....

<div class="costSpin<?= $x ?>"> 

вот код, который вызывает функцию JavaScript:

<select style="width: 230px" class="btn btn-danger btn-sm" datax="<?= $x ?>" onChange="selectCustomerCMR(this)"> 

и сам скрипт:

var x = select.getAttribute("datax"); 
$(".costSpin" + x).load("spinner.html"); 

Все это гарантирует, что каждый экземпляр класса по-прежнему имеет уникальное имя, так что они в конечном итоге

costSpin1 
costSpin2 
costSpin3 
costSpin4 

Затем, в любое время вертушка загружается, только что действие costSpin div конкретной строки.

Answer 1

У вас есть дубликат id атрибутов, который недействителен, так как id должен быть уникальным на странице. Удалите id и использовать общий класс вместо:

<td> 
    <div class="costSpin"> 
     <strong><? = $cost ?></strong><br> 
    </div> 
</td> 

Затем изменить ваш селектор:

$(".costSpin").load("spinner.html");