Automatic display keyed value in a dynamic table row using javascript, angular js and html

Question

I am creating a list that /reducesadds table rows using javascript. I would love to show the cost once inserted. The code is displaying expression name but not value keyed in. The desired result is when user types 5 it displays 5 taking into consideration of dynamic input. I am creating a list that /reducesadds table rows using javascript. I would love to show the cost once inserted. The code is displaying expression name but not value keyed in. The desired result is when user types 5 it displays 5 taking into consideration of dynamic input

     <div class="col-sm-12">
       
         <form method="POST">
       <table class="table" id="myTa">
           <thead>
               <tr>
                   
                   <th>Details</th>
                   <th>Quantity</th>
                   <th>Unit cost</th>
                   <th>Total cost</th>
                   
                   
                   
               </tr>
           </thead>
          
       </table>
       
       <br>
       <button class="btn btn-success" onclick="add()" type="button">+ Add</button>
       <button class="btn btn-danger" onclick="remove()" type="button">- Del</button>
       
       <p  id="demo"></p>
       
   <script>
     var n=1;
     var o=1;
   function remove()
   {
       var m = n-2;
       var x = document.getElementById("myTa").rows.length-2;
       var y = document.getElementById("myTa").rows.length-2;
       var g = document.getElementById("myTa").rows.length-2;
       var v = document.getElementById("myTa").rows.length-2;
       var k = document.getElementById("myTa").rows.length-2;
       document.getElementById("myTa").deleteRow(-1);
   document.getElementById("demo").innerHTML = "<input name='total' value='" + x + "' 
  type='number' hidden/>";
   }
     
       function add()
       {
           var x = document.getElementById("myTa").rows.length;
           var y = document.getElementById("myTa").rows.length;
           var g = document.getElementById("myTa").rows.length;
           var v = document.getElementById("myTa").rows.length;
           var k = document.getElementById("myTa").rows.length;
           var kk = document.getElementById("myTa").rows.length;
           var ll = document.getElementById("myTa").rows.length;
           var mm = document.getElementById("myTa").rows.length;
           var nn = document.getElementById("myTa").rows.length;
            var oo = document.getElementById("myTa").rows.length;
           var pp = document.getElementById("myTa").rows.length;
            var qq = document.getElementById("myTa").rows.length;
           
   document.getElementById("demo").innerHTML = "<input name='total' value='" + x + "' 
type='number' hidden/>";
var table = document.getElementById("myTa");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);
 var cell3 = row.insertCell(2);
 var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);


cell1.innerHTML =  "<textarea class='form-control' name='details"+ v++ +"' required>. 
</textarea>";
cell2.innerHTML =  "<input type='number' class='form-control' data-ng- 
model='quantity"+ oo++ +"'  name='quantity"+ k++ +"' required/>";
cell3.innerHTML =  "<input type='number' class='form-control' name='unit"+ g++ +"' 
required/>";
cell4.innerHTML =  "<p> {{quantity"+ nn++ +"}}</p>";



       }
       
   </script>
   </form>
     </div>  
   </div>
   </div>

I am creating a list that /reducesadds table rows using javascript. I would love to show the cost once inserted. The code is displaying expression name but not value keyed in. The desired result is when user types 5 it displays 5 taking into consideration of dynamic input