Sadovikow

в success: function(data) вы первым кликом добавляете событие – при нажатии на кнопку, менять текст. А уже при втором нажатии это событие применяется.

Я бы передавал не только ID в функцию, а и всю DOM-сущность (саму кнопку).

<button data-id="<?=$offer["ID"]?>" id="but<?=$offer["ID"]?>" onclick="add2basket(this)">To the basket</button>

function add2basket(e) {
var button = $(e);
var ID = button.attr('data-id');
  $.ajax({
    type: "POST",
    url: "/ajax/add_tobasket.php",
    dataType: 'html',
    data: {
      PRODUCT_ID: ID,
      QUANTITY: $(".quantity" + ID).val(),
    },

    success: function (data) {
     button.closest('button').text("In the basket");
  });
}

Прошу прощения, если есть ошибки в коде, главное донести мысль. Проблема лишь в том, что в success вы заводите событие при первом клике, но не вызываете изменение в кнопке