Necesito cambiar el texto del botón después de agregarlo correctamente a la cesta. Pero lo cambia justo después del segundo clic. ¿Cómo puedo cambiarlo si estoy usando foreach en php?

 <td> <?if(count($arElement["OFFERS"]) > 0):?> <?foreach ($arElement["OFFERS"] as $offer): ?> <?//var_dump($offer["ID"]);?> <div class="button456" > <button class="button-offer" id="but123" onclick="add2basket(<?=$offer["ID"]?>)">To the basket</button> <?endforeach?> <?else:> <button class="button-simple" id="but1234" data-id="12345" onclick="add2basket(<?=$arElement["ID"]?>)">To the basket</button> <?endif?> </div> </td> <script type="text/javascript"> function add2basket(ID) { $.ajax({ type: "POST", url: "/ajax/add_tobasket.php", dataType: 'html', data: {PRODUCT_ID: ID,QUANTITY: $(".quantity" + ID).val(),}, success: function (html) { $('button').on('click', function(){ $(this).closest('button').text("In the basket"); }); }, }); }