<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="angularjs-starter" ng-controller="addRemoveVehicleCntrlr">
    <form name="registrationform">
    <div style="background:#cecece; padding:10px;">
      <div  style="background:#EBEBEB; padding:10px; margin-bottom:3px" data-ng-repeat="vehicle in vehicles">
        <input type="text" ng-model="vehicle.name" name="" placeholder="Enter mobile number">
        <input type="button" value="Review" ng-click="getdetail(vehicle.name, $index, vehicle.value)" />
        <div id="myVal">{{myval}}</div>
        <a class="remove" ng-show="vehicles.length > 1" ng-click="removeVehicle($index)">Remove vehicle</a>
      </div>
    </div>
    <button class="addfields" ng-click="addNewVehicle()">Add Vehicle</button>
    <button class="addfields" ng-click="reset()">Reset</button>
    </form>
  </div>
</body>

</html>
// Code goes here

var app = angular.module('angularjs-starter', []);

  app.controller('addRemoveVehicleCntrlr', function($scope) {

  $scope.vehicles = [{id: 'vehicle1'}];
  var allVins=[];
  $scope.addNewVehicle = function() {
    var newItemNo = $scope.vehicles.length+1;
    $scope.vehicles.push({'id':'vehicle'+newItemNo});
   // console.log($scope.vehicles);
  };
   $scope.getdetail= function(name, index, value){
     console.log(name+index);
      allVins.splice(index, 1, {"vin":name,"trim":value});
      console.log(allVins);
      $scope.myval=name;
   }
   $scope.changeDetails = function(index, value){
    // allVins.splice(index, 1, {"trim":value});
     allVins[index].trim=value
     console.log(allVins);
   }
  $scope.removeVehicle = function(index) {
    $scope.vehicles.splice(index,1);
    allVins.splice(index,1);
    console.log(allVins)
  };
  $scope.reset = function(){
  
   $scope.registrationform = angular.copy($scope.vehicles);
  }
});
/* Styles go here */