JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Product_Card_Button">
  <form add-to-cart-form method="post" action="/cart/add">

    <quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">

      <button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>

      <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">

      <button class="quantity__button no-js-hidden" name="plus" type="button">+</button>

    </quantity-input>

    <br>


    <input type="submit" value="Add to cart" class="Add_To_Cart_Button" />

  </form>

</div>

CSS

input.Add_To_Cart_Button {
  background-color: #000;
  color: #fff;
  border: none;
  font: inherit;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 40px;
  width: 120px;
  -webkit-appearance: none;
  border-radius: 0;

}

JavaScript

function handleAddToCart(form) {
	const url = form.getAttribute("action");
  const formData = new FormData(form);
  doSomePost(url, formData);
}

// Cache this if possible
document.querySelector("[add-to-cart-form]")
.addEventListener("submit", (e) => {
	e.preventDefault();
  handleAddToCart(e.target);  
  return false;
})