JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="languagemodal">
  <div class="modal-dialog" style="margin: 54px 0px;"></div>
</div>

JavaScript

//fake data for this test
var response = {
    availableLanguage: [{
        id: "1",
        language_id: "English",
        title_en: "USEnglish"
    }, {
        id: "2",
        title_en: "Hindi"
    }, {
        id: "3",
        title_en: "Arabi"
    }

    ]
}


var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}


var $languagemodal = $('#languagemodal'); // get the modal and the dialog div
var $dialog = $languagemodal.find('.modal-dialog');

//$languagemodal.modal({show: true}); // just to show the modal for the demo

// get languages
//$.get("/tag/language", function(response){
        var optionLang = '';
        for (var i = 0; i < response.availableLanguage.length; i++) {
            engLangID  = response.availableLanguage[i].id;
            engLang    = response.availableLanguage[i].title_en;
            optionLang += '<option value="'+engLangID+'" data-language="'+engLang+'">'+engLang+'</option>';
        }

// load the modal content div
$dialog.html('<div class="modal-content"><div class="modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body"><div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm addMore"><option selected="selected">Add Language</option>' + optionLang + '</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save...