JSFiddle - React, Tailwind, and code Playground

by Lore ZZ

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div ng-app=''>
    <div ng-controller="questionCtrl">
        <div>
            <div>Question</div>
            <ul>
                <li ng-repeat="elemnt in questionelemnt">

                    <div>
                        <div id={{elemnt.id}} style="display:inline" >
                            <span  ng-model="elemnt.question" ng-hide="editorEnabled" ng-click="editorEnabled=true">
                                {{elemnt.question}}
                            </span>
                            <div  ng-show="editorEnabled">
                                <input  ng-model="elemnt.question" ng-show="editorEnabled" >
                                <button href="#" ng-click="editorEnabled=false">Done editing</button>
                            </div>
                        </div>
                        <div style="display:inline">
                            <span>
                                <input type="text" ng-model="elemnt.answer" placeholder="Answer" required/>
                            </span>
                        </div>
                        <span>
                            <input ng-click="inlinef($event,elemnt.id)" type="checkbox" ng-model="elemnt.inline" placeholder="Answer" required>Inline</input>
                        </span>
                        <span ng-hide="elemnt.length == 1">
                            <a href ng-click="questionelemnt.splice($index, 1)">remove</a>
                        </span>
                    </div>
                    <hr/>
                </li>
                <li>
                    <a href ng-click="newItem($event)">New Item</a>
                </li>
            </ul>
        </div>
        <div>
            <button ng-click="showitems($event)">Submit</button>
        </div>
        <div id="displayitems" style="visibility:hidden;">
            {{questionelemnt}}
        </div>
   ...

JavaScript

function questionCtrl($scope){
    var counter=0;
    $scope.questionelemnt = [ {id:counter, question : 'Question-Click on me to edit!', answer : '',inline:true} ];

    $scope.newItem = function($event){
        counter++;
        $scope.questionelemnt.push(  { id:counter, question : 'Question-Click on me to edit!', answer : '',inline:true} );
        $event.preventDefault();
    }
    $scope.inlinef= function($event,inlinecontrol){
        var checkbox = $event.target;
        if(checkbox.checked){
            $('#'+ inlinecontrol).css('display','inline');
        }else{
            $('#'+ inlinecontrol).css('display','');
        }

    }
    $scope.showitems = function($event){
        $('#displayitems').css('visibility','none');
    }
}