在向节点发送 ajax 请求而不重新加载页面后更新我在 ejs 中的视图

Question

I have a shopping cart that has a quantity field containing a plus button which the user can click to increase quantity.
I was looking for a way to update the DOM without reloading the page.
I found out about AJAX requests today and I've managed to write the code in such a way that if the user clicks on the add(+) button, the unit price is added to the total Price and is displayed.
My issue is that this only works on the first try, but on subsequent clicks the UI is not updated.

Ajax script:

$("#plus_btn").on("click", function (event) {
  event.preventDefault();
  event.stopPropagation();
  var onekg = document.getElementById("onekg").value;
  var totalPrice = document.getElementById("totalPrice").value;

  var data = {};
  data.onekg = onekg;
  data.totalPrice = totalPrice;

  $.ajax({
    url: "/update-shopping-cart",
    type: "POST",
    data: data,
  })
    .done(function (result) {
      updateDOM(result);
    })
    .fail(function (err) {
      console.log(err);
    });
});

var updateDOM = function (result) {
  var totalPrice_div = document.getElementById("price_span");

  totalPrice_div.innerHTML = result;
};

EJS VIEW

   <h1>$ 1000</h1>

   //Unit price of item
    <input type="hidden" name="onekg" id="onekg" value="1000">

 <button id="plus_btn" type="button" name="button">+</button>

 //Total price to be updated and displayed on the DOM
   <span id="price_span" >$ 1000</span>
     <input type="hidden" name="totalPrice" id="totalPrice" value="1000">

routes.js

router.route("/update-shopping-cart").post((req, res) => {
    console.log(req.body);
    let totalPrice = parseInt(req.body.totalPrice) + parseInt(req.body.onekg);
    res.status(200);
    res.render('includes/totalPrice', {
        subTotal: totalPrice
    });
    res.end();

});

includes/totalPrice.ejs - ejs template To update the DOM

<span id="price_span">Ksh. <%=subTotal %></span>

Answer 1

I found out that it wasn't updating because I wasn't updating the input field containing the value as well includes/totalPrice.ejs

<span id="price_span" class="price text-right">Ksh. <%=subTotal %></span>
<input type="hidden" name="totalPrice" id="totalPrice" value="<%=subTotal %>">

I then wrapped both the span and the input with a div

   <div id="total_div" class="total-price border">
      <span id="price_span" class="price text-right">Ksh. <%=cake.price %></span>
      <input type="hidden" name="totalPrice" id="totalPrice" value="<%=cake.price %>">
   </div>

Then finally in the ajax request function, I changed the updateDOM function from getting the id of the span to getting the id of that total_div

var updateDOM = function (result) {
  var totalPrice_div = document.getElementById("total_div");

  totalPrice_div.innerHTML = result;
};

:))