I need to change the text of the button after the success adding to the basket. But it change it just after the second click. How can I change it if Im using foreach in 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");
});
},
});
}