JSFiddle - React, Tailwind, and code Playground

by softvar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js"></script>
<div id="ptor-nav-addon">
    <div id="ptor-describe-block">
        <span id="describe-block-label">Describe Block:</span> <span class="ptor-describe-block heading"></span>
    <button id="describe-block-toggle-btn" data-status="start">Start</button>
    </div>
    <div id="ptor-it-block">
        <span id="it-block-label">It Block:</span> <span class="ptor-it-block heading"></span>
    <button id="it-block-toggle-btn" data-status="start">Start</button>
    </div>
</div>

CSS

#ptor-it-block{
    display: none;
}

#describe-block-label, #it-block-label{
    font-weight: bold;
}

.ptor-describe-block.heading, .ptor-it-block.heading{
    color:red;
}

JavaScript

$(function(){
    $("#describe-block-toggle-btn").click(function(){
        if($(this).attr('data-status')=='start'){
            var l;
            do{
                l = prompt('Describe Block Statement');
            }while(l==undefined || l=='');
            $('.ptor-describe-block.heading').text(l);
            $(this).attr('data-status', 'stop');
        }
        else{
            $("#it-block-toggle-btn").text('Start');
            $(this).attr('data-status', 'start');
            $(".ptor-describe-block.heading").text('');
        }
        $("#ptor-it-block").toggle();
        $(this).text(function(i, text){
          return text === "Start" ? "Close" : "Start";
      })
    });
    $("#it-block-toggle-btn").click(function(){
        if($(this).attr('data-status')=='start'){
            var l;
            do{
                l = prompt('It Block Statement');
            }while(l==undefined || l=='');
            $('.ptor-it-block.heading').text(l);
            $(this).attr('data-status', 'stop');
        }
         else{
            $(this).attr('data-status', 'start');
             $(".ptor-it-block.heading").text('');
        }
        $(this).text(function(i, text){
          return text === "Start" ? "Close" : "Start";
      })
    });
});