JSFiddle - React, Tailwind, and code Playground

by Naveen Jose

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <div class="container" ng-app="demoApp" ng-controller="demoController">
      <div class="row" ng-repeat="job in jobs" ng-hide="!$first">
        <div class="col-md-4">
          {{job}}
        </div>
        <div class="col-md-4">
          <button class="btn-primary btn-xs add" ng-click="showNext($event)" ng-hide="$last">Add</button>
          <button class="btn-primary btn-xs delete"  ng-click="hideThis($event)" style="display: none;">Delete</button>
        </div>
      </div>
    </div>

CSS

.row {
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 10px;
  margin-bottom: 5px;
}

JavaScript

var demoApp = angular.module('demoApp', []);

// create angular controller
demoApp.controller("demoController", ["$scope",
  function($scope) {
    $scope.jobs = ["Job 1", "Job 2", "Job 3", "Job 4", "Job 5"];
    $scope.showNext = function(evt) {
      var elm = evt.target;
      $(elm).hide();
      $(elm).next().hide();
      $(elm).closest("div.row").next().show();
    };
    $scope.hideThis = function(elm) {
      $(elm).closest("div.row").prev().find("btn").show();
      $(elm).closest("div.row").find("btn").show();
      $(elm).closest("div.row").slideUp();
    };
  }
]);