cart drawer quantity

[solcabz]

hi i create a custom cart drawer and i create a increase decrease for the quantity, the value of the input is changeing but not permanently ant the total value im stock what wrong im doing.

<form action="{{ routes.cart_url }}" method="post">
  <div class="cart-items">
    {% if cart.empty? %}
    <div class="empty-cart">
      <p>cart is empty</p>
    </div>
    {% else %}
    {% for item in cart.items %}
    <div class="cart-item">
      <!-- line item info -->
      <img width="200" height="200" loading="lazy" src="{{ item.image | image_url}}">

      <div class="cart-info-wrapper">
        <div class="info-cart-top">
          <div>
            <h2>{{ item.title }}</h2>
            <p>{{ item.final_line_price | money }}</p>
          </div>
          <div>
            <a href="{{ item.url_to_remove }}" aria-label="Remove item from cart">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
                <path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="info-cart-bottom">
          <div class="counter">
            <span class="down" aria-label="Decrease quantity" onClick='decreaseCount(event, this)'>-</span>
            <input type="text" name="updates[]" aria-label="Item quantity" value="{{item.quantity }}">
            <span class="up" aria-label="Increase quantity" onClick='increaseCount(event, this)'>+</span>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
    {% endif %}
  </div>

  <div class="checkout-wrapper">
    <p>Total: {{ cart.total_price | money }}</p>
    <a href="/checkout" class="checkoutBtn">Checkout </a>
  </div>

</form>

<style>
form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 90%;
  /* Make sure the form takes up the full height of the section */
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0;
  /* Space for the button */
  width: 100%;
  overflow-y: scroll;
}

.cart-item {
  display: flex;
  justify-content: start;
  gap: 10px;

}

.cart-item a {
  color: #ff0000;
  /* Red color for the remove link */
  text-decoration: none;
}

.cart-item img {
  border: 1px solid #2b2b2b;
  border-radius: 35px;
}

.cart-item a:hover {
  text-decoration: underline;
}

.checkoutBtn {
  background: {
      {
      section.settings.btn_bg
    }
  }

  ;

  color: {
      {
      section.settings.btn_color
    }
  }

  ;
  text-align: center;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none !important;
  font-size: 16px;
  /* Increased font size for better readability */
}

input:hover {
  background: {
      {
      section.settings.btn_hover
    }
  }

  ;
}

.cart-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.info-cart-top {
  display: flex;
  align-items: top;
  width: 100%;
  justify-content: space-between;
}

.info-cart-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
}

.counter {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  border: 1px solid #2b2b2b;
  border-radius: 35px;
  padding: 8px 0;
}

.counter input {
  background: #f1f1f1;
  text-align: center;
  outline: none;
  border: none;
  width: 35px;
}

.down,
.up {
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

.checkout-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.info-cart-top h2 {
  margin: 0;
}

</style>


<script>
  function increaseCount(a, b) {
  var input = b.previousElementSibling;
  var value = parseInt(input.value, 10);
  value = isNaN(value) ? 1 : value; // Ensure at least 1
  value++;
  input.value = value;
  }

  function decreaseCount(a, b) {
  var input = b.nextElementSibling;
  var value = parseInt(input.value, 10);
  value = isNaN(value) ? 1 : value; // Ensure at least 1
  value = value > 1 ? value - 1 : 1; // Prevent value from going below 1
  input.value = value;
  }
</script>

[solcabz]

i did some change on the js like this but im recieving a 422 error

// Update Quantity Function
function updateQuantity(line, quantity) {
  $.ajax({
    type: "POST",
    url: "/cart/change.js",
    data: {
      line: line, // Should be the line item index, not a variant ID
      quantity: quantity, // New quantity value
    },
    dataType: "json", // Parse response as JSON
    success: function (response) {
      console.log("success change");
    },
    error: function (xhr, status, error) {
      console.error("Error:", xhr.responseText, status, error);
    },
  });
}

// Quantity Selector Change Handlers
$(document).ready(function () {
  $(document).on("click", ".up, .down", function () {
    var $input = $(this).siblings("input"); // Get the input field
    var currentVal = parseInt($input.val(), 10);
    var newVal = $(this).hasClass("up")
      ? currentVal + 1
      : Math.max(0, currentVal - 1);

    $input.val(newVal);

    // Get the line item index directly from the data-line attribute
    var line = $(this).data("line");
    var quantity = $input.val();

    // Call the updateQuantity function with the correct line and quantity
    updateQuantity(line, quantity);

    // Optionally update cart display
    var formData = $(this).closest("form").serialize();
    $.ajax({
      type: "POST",
      url: "/cart/update",
      data: formData,
      dataType: "html",
      success: function (response) {
        // Replace cart HTML with the updated cart
        $(".cart__drawer").html($(response).find(".cart__drawer").html());
      },
      error: function (xhr, status, error) {
        console.error("AJAX Error:", status, error);
        alert("Failed to update cart. Please try again.");
      },
    });
  });
});