JSFiddle - React, Tailwind, and code Playground

HTML

<div id="q3"> <strong> Transaction 3: <br/>You purchase your iPhone for $500.</strong><br/>
<table border="1" width="100%"  cellspacing="0" cellpadding="0">
  <tr>
    <td width="34%" align="center" valign="top"><br />
      Dr </td>
    <td width="33%" align="center" valign="top"><p>iphone</p></td>
    <td width="33%" align="center" valign="top"><p>$500</p></td>
  </tr>
  <tr>
    <td width="34%" align="center" valign="top"><p>Cr</p></td>
    <td width="33%" align="center" valign="top"><p>Bank</p></td>
    <td width="33%" align="center" valign="top"><p>$500</p></td>
  </tr>
</table>
</div>


<div id="q4"><strong>Transaction  4:
    <br/>You put another $5,000 of your own money into the business.</strong>  
<br/><br/>
<table border="1" width="100%"  cellspacing="0" cellpadding="0">
  <tr>
    <td width="34%" align="center" valign="top"><br />
      Dr </td>
    <td width="33%" align="center" valign="top"><p>Bank</p></td>
    <td width="33%" align="center" valign="top"><p>$5,000</p></td>
  </tr>
  <tr>
    <td width="34%" align="center" valign="top"><p>Cr</p></td>
    <td width="33%" align="center" valign="top"><p>Owner's Equity</p></td>
    <td width="33%" align="center" valign="top"><p>$5,000</p></td>
  </tr>
</table>
        </div>

<div id="q5"><strong>Transaction  5:
    <br/>You pay back $1,000 of the loan (no interest).</strong>  
<br/><br/>
<table border="1" width="100%"  cellspacing="0" cellpadding="0">
  <tr>
    <td width="34%" align="center" valign="top"><br />
      Dr </td>
    <td width="33%" align="center" valign="top"><p>Loan</p></td>
    <td width="33%" align="center" valign="top"><p>$1,000</p></td>
  </tr>
  <tr>
    <td width="34%" align="center" valign="top"><p>Cr</p></td>
    <td width="33%" align="center" valign="top"><p>Bank</p></td>
    <td width="33%" align="center" valign="top"><p>$1,000</p></td>
  </tr>
</table>
        </div>


<div id="q6"><strong>Transaction  6:
    <br/>You purchase a computer for $1,500.</strong> ...

CSS

#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #f2f8fc;}
li.ui-draggable-dragging{
   list-style:none;
}
.ui-widget-content ul li
{
    display: block;
	float: left;
	line-height: 30px;
	list-style:none;
	margin: 0 0px;
    text-decoration:blink;
}
.ui-widget-content
{
   min-height:40px;
    
}
.hidden{
    visibility:hidden;
}
#equal,#bank2,#bank3,#bank4,#bank5,#bank6,#bank7,#bank8,#bank9,#bank10,#bank11,#bank12,#bank13,#loan1,#owner1,#sales1,#iphone0,#computer1,#oven1,#cake1,#interest1,#sales0,#john1,#car1
{display:none;
}
#next1,#next2,#next3,#next4,#next5,#next6,#next7,#next8,#next9,#next10,#next11,#next12,#next13,#next14/*hide next transactions*/
{display:none;
}
#bankledger,#ownerledger,#loanledger,#iphoneledger,#computerledger,#ovenledger,#cakeledger,#interestledger,#salesledger,#telephoneledger,#repairledger,#drawingledger,#carledger,#johncarledger/*hide ledger*/
{display:none;
}

#q3,#q4,#q5,#q6,#q7,#q8,#q9,#q10,#q11,#q12,#q13,#q14,#q15 /*hide question*/
{display:none;
}

.button-purple {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #8040be #8040be #733aab;
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #733aab #8040be #8040be;
}
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 20px;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0...

JavaScript

$a=2;
$("#q3").show();
$("#bankledger").show();
 $("#iphoneledger").show();
$('#submit').click(function() {
              if($a==2)
                {
                 $("#bankledger").show();
                 $("#bank2").show();
                 $("#bank2").css("background-color", "#CC66FF");
                 $("#iphoneledger").show();
                 $("#iphone0").show();
                 $("#iphone0").css("background-color", "#CC66FF");
                 $("#next3").show();
               }
    else if($a==3)
                {
                 $("#bankledger").show();
                 $("#bank3").show();
                 $("#bank3").css("background-color", "#CC66FF");
                 $("#ownerledger").show();
                 $("#owner1").show();
                 $("#owner1").css("background-color", "#CC66FF");
                 $("#next4").show();
               }
    
    else if($a==4)
                {
                 $("#bankledger").show();
                 $("#bank4").show();
                 $("#bank4").css("background-color", "#CC66FF");
                 $("#loanledger").show();
                 $("#loan1").show();
                 $("#loan1").css("background-color", "#CC66FF");
                 $("#next5").show();
               }
    
    else if($a==5)
                {
                 $("#bankledger").show();
                 $("#bank5").show();
                 $("#bank5").css("background-color", "#CC66FF");
                 $("#computerledger").show();
                 $("#computer1").show();
                 $("#computer1").css("background-color", "#CC66FF");
              
                 $("#next6").show();
               }
    else if($a==6)
                {
                 $("#bankledger").show();
                 $("#bank6").show();
                 $("#bank6").css("background-color", "#CC66FF");
                 $("#ovenledger").show();
                 $("#oven1").show();
                 $("#oven1").css("background-color",...