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");
            });
        },
    });
}