JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div ng:app="SepApp">
  <div ng:controller="Ctrl">
    <div ng:repeat="item in upper.items">
      <span ng-bind="item.name"></span>
      <span ng-bind="item.age"></span>
      <span class="btn" ng:click="upper.rmItem(item)">Remove Upper Item</span>
    </div>
    <div ng:repeat="item in lower.items">
      <span ng-bind="item.name"></span>
      <span ng-bind="item.age"></span>
      <span class="btn" ng:click="lower.rmItem(item)">Remove Upper Item</span>
    </div>
  </div>
</div>

CSS

.btn{
  outline: 1px dashed grey;
}

JavaScript

var app = angular.module("SepApp", []);

app.controller("Ctrl", function($scope) {
  var upper = {};
  upper.items = [{
    name: 'Ajay',
    age: 23
  }, {
    name: 'Bajrangi',
    age: 16
  }, {
    name: 'Chirag',
    age: 28
  }];
	
  upper.rmItem = function(item){
  		console.log("Name :" + item.name);
  }

  var lower = {};
  lower.items = [{
    name: 'Google',
    age: 13
  }, {
    name: 'MS',
    age: 16
  }, {
    name: 'Apple',
    age: 8
  }];

	lower.rmItem = function(item){
  		console.log("Age :" + item.age);
  }
  $scope.upper = upper;
  $scope.lower = lower;
});