Why this Javascript code is not working. Jquery already added in inter file. HTML and Javascript code below here. Django Project, Tailwind CSS

/** JavaScript Code **/

 $(".changeQuantity").click(function (e) {
    e.preventDefault();

    var product_id = $(this).closest(".product_data").find(".prod_id").val();
    var product_qty = $(this).closest(".product_data").find(".qty_input").val();
    var token = $('input[name="csrfmiddlewaretoken"]').val();
    $.ajax({
      method: "POST",
      url: "/update-cart",
      data: {
        product_id: product_id,
        product_qty: product_qty,
        csrfmiddlewaretoken: token,
      },
      success: function (response) {
        console.log(response);
        alertify.success(response.status);
      },
    });
  });

/- ---"HTML CODE"--/

      <span class="flex flex-row h-10 w-32 rounded-lg relative bg-transparent mt-1">
        <button data-action="decrement" class=" changeQuantity text-gray-600 bg-gray-300 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer outline-none">
          <span class="m-auto text-2xl font-thin">−</span>
        </button>
        <input type="text" class=" qty_input focus:outline-none text-center w-full font-semibold text-md  md:text-basecursor-default flex items-center outline-none" name="custom-input-number" value="{{ item.product_qty }}"></input>
      <button data-action="increment" class=" changeQuantity bg-gray-300 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer">
        <span class="m-auto text-2xl font-thin">+</span>
      </button>
    </span>