JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

<button class="click-me">Click me!</button>

<div id="contentOne"></div>
<script id="templateOne" type="text/template">
    <button class="click-me-one">Click me again!</button>
</script>

<div id="contentTwo"></div>
<script id="templateTwo" type="text/template">
    <button class="click-me-two"><b>One more time!</b></button>
</script>

<div id="contentThree"></div>
<script id="templateThree" type="text/template">
    <button class="click-me-three"><em>The end!</em></button>
</script>

JavaScript

(function(){

    var foo = {
        init: function(){
            this.bindEvents();
        },

        bindEvents: function(){
            $('.click-me').on('click', this.showContentOne.bind(this));
        },

        showContentOne: function(){
            var template = $('#templateOne').html();
            $('#contentOne').html(Mustache.render(template));
            $('.click-me-one').on('click', this.showContentTwo.bind(this));
        },

        showContentTwo: function(){
            var template = $('#templateTwo').html();
            $('#contentTwo').html(Mustache.render(template));
            $('.click-me-two').on('click', this.showContentThree.bind(this));
        },

        showContentThree: function(){
            var template = $('#templateThree').html();
            $('#contentThree').html(Mustache.render(template));
        },
    }
    foo.init();

})();