JSFiddle - React, Tailwind, and code Playground

by Michel W

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
    <div ng-app="catadmin">

        <div id="content" ng-controller="CatalogueAdminForm as admin" class="pure-g">
            <div class="pure-u-1">
                <div class="pure-g" ng->   


                    <ul id="sortable" class="pure-u-1" >
                        <li ng-repeat="cat in admin.catalogues" class="pure-g">
                            <form class="pure-form pure-form-stacked" name="form[{{admin.catalogues.indexOf(cat)}}]" no-validate>
                                <div class="pure-u-1-24 carets">
                                    <i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i>
                                </div>

                                <div class="pure-u-1-6">
                                    <label for="title">Title</label><input type="text" name="title" ng-model="cat.title" />
                                </div>

                                <div class="pure-u-1-6">
                                    <label for="image">Image</label><input type="text" name="image" ng-model="cat.image" istype="image" />
                                </div>

                                <div class="pure-u-1-6">
                                    <label for="pdf">PDF</label><input type="text" name="pdf" ng-model="cat.pdf" istype="pdf" />
                                </div>

                                <div class="pure-u-1-12">
                                    <button ng-click="admin.removeCatalogue(cat)" class="pure-button orange...

JavaScript

(function () {

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

    app.controller('CatalogueAdminForm', ['$scope', '$http', function ($scope, $http) {

            this.catalogues = [];

            this.addCatalogue = function () {
                var newcat = {
                    title: "",
                    image: "",
                    pdf: ""
                };
                this.catalogues.push(newcat);
            };

            this.removeCatalogue = function (item) {

                this.catalogues.splice(this.catalogues.indexOf(item), 1);
            };

                        
            this.sort = function(fromIndex, toIndex){

                var element = this.catalogues[fromIndex];
                this.catalogues.splice(fromIndex, 1);
                this.catalogues.splice(toIndex, 0, element);

            };



        }]);

 
})();