Is there anyway to show always rows modified in a FooTable

The system is made with php, mysql, javascript, jquery and what it does is show a list of products and the user chooses the amount and shows a total.

I want to make a function that when the user modifies the quantity of a row, the row is always displayed in the Table, no matter if they search for other products or change the page of the table

This is the code

  <table  class="table-striped footable-res footable metro-blue" data-page-size="36" data-filter="#filter" style="color: #666;" data-filter-exact-match="false" id="tb">
        <thead>
              <th width="5%">°</th>
              <th width="40%">Producto</th>
              <th width="15%">Precio</th>
              <th width="15%">Cantidad</th>
              <th width="15%">Total</th>
              <tr></tr>
        </thead>
        <tbody>
              <td colspan=5 data-value='Nombre de categoria'><b>Nombre de categoria</b></td><tr></tr>";
              <td>Contador 1</td>";
              <input type='text' name='seleccion1' value='IDPRODUCTO' style='visibility: hidden !important; height: 0 !important; width: 0 !important; padding: 0 !important;'>";
              <td data-value='NOMBREPRODUCTO CATEGORIAID CATEGORIANOMBRE' data-type='text'>"PRODUCTONOMBRE"</td>";

              <td><input type='text' class='precio' name='precioIDPRODUCTO' id='precio' value='PR' style='color: black; background: transparent; border: 0; text-align: center;' readonly></td>";
              <td><input type='text' class='cantidad' name='cantidadIDPRODUCTO' id='cantidad' placeholder='0' placeholder='0' style='color: black;'></td>";
              <td><input type='text' class='total' name='totalIDPRODUCTO' id='total'  value='0' value='0' style='color: black;'></td>";
              <tr></tr>
              }
        }
              if (CONTADOR==0){
                    <td colspan='3'>No se han agregado productos aún.</td>";
              }
              echo "<input type='text' name='cod_bod' value='".$sel_bodega."' style='visibility: hidden !important; height: 0 !important; width: 0 !important; padding: 0 !important;'>";
        }
  ?>
  </tbody>
  <tfoot>
        <style>
        .footable > tfoot > tr > th, .footable > tfoot > tr > td{ color: black; }
        input[type=text]{ color: black; }
        </style>

  <td colspan="4" align="right">Subtotal</td>
  <td><input type="text" class="subtotal" name="subtotal" id="subtotal" readonly placeholder="0"></td>
  <tr></tr>
  <td colspan="4" align="right">Descuento %<input type="text" id="discount" name="discount" class="discount" style="color: black; background: transparent; border: 0; text-align: center; width: 20px;" value="0"></td>
  <td><input type="text" class="descuento" class="descuento" name="descuento" id="descuento" readonly placeholder="0"></td>
  <tr></tr>
  <td colspan="4" align="right">Total</td>
  <td><input type="number" pattern="[0-9]{2}" min="50000" max="2000000" class="totales" id="totales" name="totales" readonly placeholder="0" ></td>
  <tr>
  <td colspan="5">
  <div class="pagination pagination-centered"></div>
  </td>
  </tr>
  </tfoot>
  </table>
  <script>
    //data-toggle="true"
    document.getElementById("tb").addEventListener("input", function(e) {
    const parent = e.target.closest("tr");
    const precio = parent.querySelector('[class=precio]').value;
    const cantidad = parent.querySelector('[class=cantidad]').value;
    const total = precio * cantidad;
    parent.querySelector('[class=total]').value = total;
    document.querySelector('[class=subtotal]').value = subtotal();
    document.querySelector('[class=discount]').value = discount();
    document.querySelector('[class=descuento]').value = dscto();
    document.querySelector('[class=totales]').value = totalfinal();
});

function subtotal(){
    var subtotal = 0;
    for(var x=0;x<document.querySelectorAll(".total").length;x++){
        subtotal += Number(document.querySelectorAll(".total")[x].value);
    }
    return subtotal;
}


function discount(){
    var subtotal = Number(document.getElementById("subtotal").value);
    var discount = 0;
    if(subtotal > 150000 && subtotal < 299999){
        discount = 3;
    }
    if(subtotal > 300000 && subtotal < 449999){
        discount = 4;
    }
    if(subtotal > 450000){
        discount = 5;
    }

    return discount;
}
function dscto(){
    var subtotal = Number(document.getElementById("subtotal").value);
    var descuento = 0;
    if(subtotal > 150000 && subtotal < 299999){
        descuento = subtotal * 0.03;
    }
    if(subtotal > 300000 && subtotal < 449999){
        descuento = subtotal * 0.04;
    }
    if(subtotal > 450000){
        descuento = subtotal * 0.05;
    }

    return descuento;
}



function totalfinal(){
    var subtotal2 = Number(document.getElementById("subtotal").value);
    var descuento2 = Number(document.getElementById("descuento").value);

    var totales = subtotal2 - descuento2;
    return totales;
}