JAVASCRIPT

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

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>