JSFiddle - React, Tailwind, and code Playground

by Buddy

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">
    <body>

        <script src="static/jquery/jquery-1.11.0.min.js"></script>
        <script src="static/bootstrap/js/bootstrap.js"></script>

    </body>

JavaScript

"use strict"
function addmodal(id) {
    var modal = $('<div>', { 
        id: id, role: 'dialog' 
    }).addClass('modal')
    $('body').append(modal)
    
    var modaldialog = $('<div>').addClass('modal-dialog')
    modal.append(modaldialog)
    
    var modalcontent = $('<div>').addClass('modal-content')
    modaldialog.append(modalcontent)
    
    var modalheader = $('<div>').addClass('modal-header')
    modalcontent.append(modalheader)
    
    var modalbody = $('<div>').addClass('modal-body')
    modalcontent.append(modalbody)
    
    var modalfooter = $('<div>').addClass('modal-footer')
    modalcontent.append(modalfooter)
    
    ;(function(modal) {
        modal.click(function(e) { 
            if(e.target == modal.get(0)) {
                modal.modal('hide')
                modal.remove() 
            }
        })
    })(modal);
    
    modal.modal('show')
    
    return modal
}

var makebutton = function(t) { 
    return $('<button>', { text: t }).addClass('btn')
}

var button = 
    makebutton('show 1').click(function() { 
        addmodal('modal1') 
        var button2 = 
            makebutton('show 2').click(function() { 
                addmodal('modal2') 
                var button3 = 
                    makebutton('show 3').click(function() { 
                        addmodal('modal3') })
                $('#modal2').find('.modal-body').append(button3)
            })
        $('#modal1').find('.modal-body').append(button2)
    })
$('body').append(button)