JSFiddle - React, Tailwind, and code Playground

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
  <div ng-repeat="element in playlistElements | orderBy: element.position">
    <div class="">{{ element.firstLine }}</div>
    <div class="">{{ element.lastLine }}</div>
    <div class="">
      <p>
        <i class="fa fa-arrow-up" ng-if="!$first" ng-click="rebuildPlaylist($index, 'up')"></i>
        <i class="fa fa-arrow-down" ng-if="!$last" ng-click="rebuildPlaylist($index, 'down')"></i>
        <i class="fa fa-times" ng-click="rebuildPlaylist(element, 'remove')"></i>
      </p>
    </div>
  </div>
</div>

JavaScript

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

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.playlistElements = [{
    position: "abc",
    firstLine: "one",
    lastLine: "last"
  }, {
    position: "abc",
    firstLine: "two",
    lastLine: "last"
  }, {
    position: "abc",
    firstLine: "three",
    lastLine: "last"
  }, {
    position: "abc",
    firstLine: "four",
    lastLine: "last"
  }, {
    position: "abc",
    firstLine: "five",
    lastLine: "last"
  }, {
    position: "abc",
    firstLine: "six",
    lastLine: "last"
  }, ];
  $scope.rebuildPlaylist = function(index, action) {
    if (action == 'up' && index > 0) {
      var tempoStorage = $scope.playlistElements[index];
      $scope.playlistElements[index] = $scope.playlistElements[index - 1];
      $scope.playlistElements[index - 1] = tempoStorage;
    }
    if (action == 'down' &&  index < $scope.playlistElements.length) {
      var tempoStorage = $scope.playlistElements[index];
      $scope.playlistElements[index] = $scope.playlistElements[index + 1];
      $scope.playlistElements[index + 1] = tempoStorage;
    }
  };
}]);