JSFiddle - React, Tailwind, and code Playground

by hirenwebdp

HTML

<b style=color:blue>Observation 1:</b>
<br/>
Enter the Largest Expense<input type="text" name="Assets" id="Assets" size="25" /><br />
<div id="message1">Corect!
Your largest expense is your raw materials – cake mix. It is 63% of your total expenses. It is 42% of your sales. This is very high. Perhaps review supplier options.
</div>
<div id="e1"><b>Try again &nbsp(Hint:Check the cake mix expense)</b></div>


<br/>
<div id="ob2"><b style=color:blue>Observation 2:</b><br/>Do you see advertising expense?<input type="checkbox" class="obadd"  value="2"/>Yes<input type="checkbox" class="obadd" value="22"/>No</div><br/>
<div id="message2">You are not spending any money on advertising. This could be the key to increasing your sales. A good way to begin advertising is to start with social media and then begin spending money on getting exposure in food magazines, websites and deal sites like Groupon.
</div>
<div id="e2"><b>Try again</b></div>


<div id="ob3"><b style=color:blue>Observation 3:</b><br/>Do you see advertising wages?<input type="checkbox" class="obadd1"  value="1"/>Yes<input type="checkbox" class="obadd1" value="2"/>No</div>


<div id="message3">You are not spending any money on wages. Why don’t you have staff? A key action in increasing your sales might be to start training staff to do some of your jobs for you, such as cleaning and returning phone calls. This allows you to concentrate on running and expanding the business.
</div>
<div id="e3"><b>Try again</b></div>


<div><b style=color:blue>Observation 4:</b><br/>How much money is in bank ?<input type="text" id="text1" name="text1"/></div>
<div id="ob4">Are you sure?<input type="checkbox"  class="obadd2" value="1"/>Yes <input type="checkbox" class="obadd2" value="2"/>No </div><br/>
<div id="message4">You are paying interest on your loan, yet you have $21,650 sitting in the bank. You are paying interest for no reason. Had you paid the loan off and avoided your interest expense this year, your net profit would...

CSS

#ob1,#ob4,#ob6{display:none;}
#ebdivnext{display:none;}
#asset{display:none;}
#e1,#e2,#e3,#e4,#e5,#e6{display:none;}

#message1,#message2,#message3,#message4,#message5,#message6{
    display:none;
}

#s2{display:none;}
input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    padding: 2px 5px;
}

JavaScript

$(document).ready(function(){
    
$("#Assets").keyup(function(){
        $("#Assets").blur();
        $("#Assets").focus();


    
    $("#Assets").change(function(){
      var assetname = document.getElementById('Assets').value;
      assetname = jQuery.trim(assetname);
      if(assetname.match(/cake/gi))
      {
        $('#message1').show();
         $('#e1').hide();
      }
      else if(assetname =='')
        {
            
            $('#e1').hide();
            $('#message1').hide();
        }
       else
       {
            $('#message1').hide();
             $('#e1').show();
        }
});
});    
    
    $('input.obadd').click(function () {
    $('input.obadd:checked').not(this).removeAttr('checked');
     var sFilter = "";
    $('input.obadd[type=checkbox]').each(function () {
        sFilter = sFilter + (this.checked ? $(this).val() : "");
    });
    if(sFilter=='22')
    {
      
        $('#message2').show();
         $('#e2').hide();
    }
    else if(sFilter=='')
    {
        
        $('#e2').hide();
        $('#message2').hide();
    }
   else
   {
        $('#message2').hide();
         $('#e2').show();
    }
});
    
    
      $('input.obadd1').click(function () {
    $('input.obadd1:checked').not(this).removeAttr('checked');
     var sFilter = "";
    $('input.obadd1[type=checkbox]').each(function () {
        sFilter = sFilter + (this.checked ? $(this).val() : "");
    });
    if(sFilter=='2')
    {
      
        $('#message3').show();
         $('#e3').hide();
    }
    else if(sFilter=='')
    {
        
        $('#e3').hide();
        $('#message3').hide();
    }
   else
   {
        $('#message3').hide();
         $('#e3').show();
    }
});
   
     $("#text1").keyup(function(){
        $("#text1").blur();
        $("#text1").focus();
     });

    
    $("#text1").change(function(){
        var assetname = document.getElementById('text1').value;
    $('#ob4').show();
    });
    
    $('input.obadd2').click(function () {
   ...