Display nested Child Table records in Bootstrap Popup on Button Click

if we click subitems it can open one pop up window after entering values on pop up window we can close that window

after clicking of add function in the parent row the values can go to the above row in that

Order values are displayed in table format

I need to display order values on the pop-up window.

The below code is in AngularJs and this is exactly what I want but can someone convert the same result without angular when I submit data it will pass all data to the asp.net core controller.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('MyApp', [])
  app.controller('MyController', function($scope, $window) {
    $scope.Customers = [{
      Name: "John Hammond",
      Country: "United States",
      Orders: [{
          OrderId: 10248,
          Freight: 32.38,
          ShipCountry: 'France'
        },
        {
          OrderId: 10249,
          Freight: 12.43,
          ShipCountry: 'Japan'
        },
        {
          OrderId: 10250,
          Freight: 66.35,
          ShipCountry: 'Russia'
        }
      ]
    }];

    $scope.Orders = [];
    $scope.Add = function() {
      var customer = {};
      customer.Name = $scope.Name;
      customer.Country = $scope.Country;
      customer.Orders = $scope.Orders;
      $scope.Customers.push(customer);
      $scope.Orders = [];
      $scope.Name = "";
      $scope.Country = "";
    };
    $scope.add2 = function() {

      var items = {};
      items.OrderId = $scope.OrderId;
      items.Freight = $scope.Freight;
      items.ShipCountry = $scope.ShipCountry;
      $scope.Orders.push(items);
      $scope.OrderId = "";
      $scope.Freight = "";
      $scope.ShipCountry = "";
    }
    $scope.Remove = function(index) {
      var name = $scope.Customers[index].Name;
      if ($window.confirm("Do you want to delete: " + name)) {
        $scope.Customers.splice(index, 1);
      }
    }
    $scope.remove1 = function(index) {
      var name = $scope.Orders[index].OrderId;
      if ($window.confirm("Do you want to delete: " + name)) {
        $scope.Orders.splice(index, 1);
      }
    }
  });
</script>
<div ng-app="MyApp" ng-controller="MyController">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
      <th>
        Orders
      </th>
      <th>
        &nbsp;
      </th>
    </tr>
    <tbody ng-repeat="m in Customers">
      <tr>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td value="">
          <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders</button>
          <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" ng-click="clicked=false">
                                        ×</button>
                  <h4 class="modal-title">
                    Order Details</h4>
                </div>
                <div class="modal-body">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody ng-repeat="o in m.Orders">
                      <tr>
                        <td>
                          
                        </td>
                        <td>
                          
                        </td>
                        <td>
                          
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                        Ok</button>
                </div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <input type="button" ng-click="Remove($index)" value="Remove" class="btn btn-danger" />
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" ng-model="Name" />
        </td>
        <td>
          <input type="text" ng-model="Country" />
        </td>
        <td>
          <button type="button" class="btn btn-primary" ng-model="subitems" data-toggle="modal" data-target="#popup">
                        Add Orders</button>
        </td>
        <td>
          <input type="button" ng-click="Add()" class="btn btn-primary" value="Add" />
        </td>
      </tr>
    </tfoot>
  </table>
  <div class="modal fade" id="popup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
                        ×</button>
          <h4 class="modal-title">
            Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="s2vk-container">
            <div class="row">
              <div class="col-md-8">
                <div class="panel panel-default">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          Freight
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                          ShipCountry
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2" ng-repeat="subitem in Orders">
                        <td>
                          
                        </td>
                        <td>
                          
                        </td>
                        <td>
                          
                        </td>
                        <td>
                          <button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly="readonly">
                                                        Delete</button>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr style="padding-left: 20px; padding-right: 20px;">
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="OrderId" />
                        </td>
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="Freight" />
                        </td>
                        <td>
                          <input type="text" class="input-sm form-control" ng-model="ShipCountry" />
                        </td>
                        <td>
                          <button type="button" class="btn btn-primary" ng-click="add2()">
                                                        Add</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

from Display nested Child Table records in Bootstrap Popup on Button Click