JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<div data-ng-app data-ng-controller="alphabetCtrl">
    <input type="button" value="Add letter" data-ng-click="addLetter()"/>
    <div>
    <div class="letter" data-ng-repeat="item in created">
    {{item.model.symbol}}<select data-ng-model="item.model" ng-init="item.model=allLetters[0]" ng-options="value.name for value in allLetters">
    </select>
         <input type="button" value="x" data-ng-click="removeItem($index);" />
        <div ng-repeat="combination in item.combionations = getCombinations(item)">
                {{combination}}
            </div>
    </div>
    </div>
</div>

CSS

.letter {
    display: inline-block;
}

JavaScript

function alphabetCtrl($scope) {
    $scope.created = [];
$scope.allLetters = [{name:"aleph", symbol:"\u05D0"}, {name:"bet ", symbol:"\u05D1"}, {name:"gimel", symbol:"\u05D2"}, {name:"daleth", symbol:"\u05D3"}, {name:"he ", symbol:"\u05D4"}, {name:"vav", symbol:"\u05D5"}, {name:"zayin ", symbol:"\u05D6"}, {name:"chet ", symbol:"\u05D7"}, {name:"teth ", symbol:"\u05D8"}, {name:"iod ", symbol:"\u05D9"}, {name:"kaph ", symbol:"\u05DB"}, {name:"lamed", symbol:"\u05DC"}, {name:"mem", symbol:"\u05DE"}, {name:"nun", symbol:"\u05E0"}, {name:"samech ", symbol:"\u05E1"}, {name:"ayin", symbol:"\u05E2"}, {name:"peh ", symbol:"\u05E4"}, {name:"tzadi ", symbol:"\u05E6"}, {name:"quph ", symbol:"\u05E7"}, {name:"resh ", symbol:"\u05E8"}, {name:"shin ", symbol:"\u05E9"}, {name:"tav", symbol:"\u05EA"}];
    $scope.addLetter = function() {
        $scope.created.push({
            model: "",
            combionations: []
        });
    }
    $scope.removeItem = function (index) {
        $scope.created.splice(index, 1);
    };
    $scope.getCombinations = function(item) {
        var result = [];
        for(var i = 0 ; i < $scope.allLetters.length ; i++) {
            if($scope.allLetters[i].name != item.model.name) {
                result.push(item.model.symbol + "-" + $scope.allLetters[i].symbol + " " + item.model.name + "-" + $scope.allLetters[i].name);
            }
        }     
        return result;
    }
}