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

Issue

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

Solution

Here's the thing: AngularJS doesn't work this way and trying to edit the DOM directly like this can lead to many issues down the road. However, when you learn the angular way of doing this, you'll never look back. It's much easier.

In essence, you have a view (table) which will be generated from data (an array). To add rows or subtract rows is as simple as adding or subtracting rows from your array. Here's a quick demo, showing one way to go about it, getting totals as well.

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.tableData = [{
        details: "Here are some details...",
        quantity: 5,
        unit_cost: 14.99
      },
      {
        details: "Here are some details2...",
        quantity: 2,
        unit_cost: 4.99
      },
      {
        details: "Here are some details3...",
        quantity: 1,
        unit_cost: 44.99
      },
      {
        details: "Here are some details4...",
        quantity: 0,
        unit_cost: 104.99
      }
    ];

    $scope.getTotal = function() {
      return $scope.tableData.reduce((b, a) => {
        b += a.unit_cost * a.quantity;
        return b;
      }, 0).toFixed(2)
    }

    $scope.add = function() {
      let blankRow = {
        details: "",
        quantity: "",
        unit_cost: ""
      }
      $scope.tableData.push(blankRow)
    };


    $scope.remove = function(index) {
      $scope.tableData.splice(index, 1);
    };


  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form method="POST">
    <table class="table">
      <thead>
        <tr>
          <th>Details</th>
          <th>Quantity</th>
          <th>Unit cost</th>
          <th>Total cost</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='i in tableData'>
          <td>
            <textarea class='form-control' ng-model="i.details" name="details_{{$index}}" required></textarea>
          </td>
          <td>
            <input type='number' name="quantity_{{$index}}"  class='form-control' ng-model='i.quantity' required/>
          </td>

          <td>
            <input type='number' name="unit_cost_{{$index}}"  class='form-control' ng-model='i.unit_cost' required/>
          </td>

          <td>
            ${{(i.unit_cost * i.quantity).toFixed(2)}}
          </td>
          <td>
            <button class="btn btn-danger" ng-click="remove($index)" type="button">- Del</button>
          </td>
        </tr>
      </tbody>
    </table>
    <hr>
    <button class="btn btn-success" ng-click="add()" type="button">+ Add</button>
    <hr>
    <p> Total:  ${{getTotal()}}</p>
  </form>
</div>

Answered By - Kinglish