Arrows disappear when decreasing/increasing in input [ type='number' ], how to fix?

Question

css

There is a project on django, there is a basket with a counter for the quantity of goods.
The counter works as it should on ajax.
Code example:

 window.onload=function () {
  $(".quantity").on("change", "input[type='number']", function (event) {
      const targetHref = event.target;
      $.ajax({
           url: "/basket/update/" + targetHref.name + '/' + targetHref.value + '/',
          success: function (data) {
            $('.quantity').html(data.result);
         }
    } );
  });
  };

I decided to style the input and added the following code:

But somewhere there was a conflict, now when increasing / decreasing the counter works once and the buttons simply disappear.
I turned off ajax, everything is in place and changes the quantity, but then it does not count the total quantity and the total cost. Also, if I leave ajax, but remove the styling of the input, everything works fine, but you still need to style)) As I understand the conflict between ajax and jQuery, but I can’t understand where exactly)

Here is what before I click on the button:


After clicking buttons:


Ajax works once (calculates the total amount and the total number of goods), but after the buttons simply disappear.
Help me understand where, how and why the buttons disappear when the counter is changed for the first time. Thanks

Answer 1

Is the .quantity-nav block coming from the server? After the request, the content of .quantity is replaced with a response from the server, which most likely does not contain these buttons