How to change text on button after click?

Question

css

In an online store on Opencart, the product is not clearly added to the cart. In order for the user to better understand that the product has been added to the cart, we want to make sure that after clicking on the "Buy" button, the text changes to "In the cart".
I understand that this can be done using js.
To do this, I gave the button in the span id = "buy-button"

<div class="cart">
            <button onclick="cart.addcart('<?php echo $product['product_id']; ?>');" class="btn btn-shopping-cart" value="<?php echo $button_cart; ?>"> 
              <i class="fa fa-shopping-cart"></i>
              <span id="buy-button"><?php echo $button_cart; ?></span>
            </button>		
          </div>

I found a file that is responsible for changing dom after clicking on the "Buy" button. I commented out the line that each time raised the site to the top after adding the product to the cart. And now the question is how to change the text of the button to "In the cart".

if (json['success']) {
          $('#notification').html('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

          $('#cart-total').html(json['total']);

          //$('html, body').animate({ scrollTop: 0 }, 'slow');

          $('#cart > ul').load('index.php?route=common/cart/info ul li');
        }
      }

Answer 1

$("#buy-button").text("TEXT");

Answer 2

easier
Replace
On the
In a good way, it is still necessary to register everything so that after the update the inscription remains new. But it hasn't gotten there yet.)