JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<div id="detailsBlock">
    
<table id="optionAndAnswer">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr class="option">
<td>Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" />
    <span href="#" class="showGrid">Select an Option</span>
</div>
<table class="optionTypeTbl">
<tr>
<td>
            <input class="gridBtns" name="btn3Name"  id="btn3"     type="button"  value="3"  />
    </td>
    </tr>
            <tr>
        <td>
        <input class="gridBtns" name="btnTrueorFalseName"  id="btnTrueorFalse"     type="button"  value="True or False"  />
        </td>
        </tr> 
        </table>
        </td>
</tr>
<tr class="numberAnswer">
<td>Number of Answers:</td>
<td>
<span class="na string" >Only 1 Answer</span>
<input type="text" name="numberAnswer" class="numberAnswerTxt answertxt" onChange="getButtons()" >
</td>
</tr>
<tr class="answer">
<td>Answer</td>
<td>
<table>
<tr>
<td>
<input class="answerBtns answers" name="answerAName"     id="answerA"         type="button"      value="A"         onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerBName"    id="answerB"         type="button"   value="B"         onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerCName"     id="answerC"         type="button"      value="C"         onclick="btnclick(this);"/>
    </td>
    </tr>
    <tr>
<td>
<input class="answerBtns answers" name="answerTrueName"  id="answerTrue"     type="button"      value="True"     onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFalseName" id="answerFalse"     type="button"   value="False"     onclick="btnclick(this);"/>
        </td>
    </tr>
</table>
</td>
</tr>
</table>
    </form>

CSS

td { 
    vertical-align: top;
     }

.noofanswers{
    width: 150px;
    text-align:center;
}
.option{
    width: 200px;
    text-align:center;
}
.answer { 
    width: 275px;
    text-align:center;
     }
#optionAndAnswer{
    display:inline-block;
    vertical-align:top;
}

#optionAndAnswer th{
    border-collapse:collapse;
    border:1px solid black;    
}

#optionAndAnswer td{
    border-collapse:collapse;
    border:1px solid black;    
}

#optionAndAnswer td table td {
    border: 0px;   
}
#detailsBlock{    
    text-align:center;
}
    
.numberAnswerTxt{
    float:left;
    width:40px;
    font-size:14px;
    font-weight:bold;
}

.numberAnswerTxtRow{
    float:center;
    width:40px;
    font-size:14px;
    font-weight:bold;
}
  
              
.na{
    display:none;
    float:left;    
}

.naRow{
    display:none;
    float:center;    
}

.answerBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    }
    
.answerBtnsOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
 
}
 
.answerBtnsOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
}

.answerBtnsRow{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    }
    
.answerBtnsRowOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
 
}
 
.answerBtnsRowOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
}

.gridBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    }
    
.gridBtnsOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
}
 
.gridBtnsOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
   ...

JavaScript

$(document).ready(function()

{

    initClick = 0;


    $(document).on('click', '.showGrid', function(e) {

        $(".gridBtns").removeClass("gridBtnsOn");

        var value = $(this).siblings('input[name=gridValues]').val();

        $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");

        $('.optionTypeTbl').fadeToggle('slow');
        $(this).parent().append($('.optionTypeTbl'));

        e.stopPropagation();

    });



    $(document).click(function() {

        $('.optionTypeTbl').fadeOut('slow');
        // fadeOut already hides it for you.
    });

    $('.optionTypeTbl input').on('click', function() {

        $(".gridBtns").removeClass("gridBtnsOn");
        $(this).addClass("gridBtnsOn");

        console.log($(this).closest('td'));

        $(this).closest('.optionTypeTbl').siblings('input[name=gridValues]').val($(this).val());
        $(this).closest('.optionTypeTbl').siblings('span[name=gridValues]').val($(this).val());
        $('.optionTypeTbl').hide();
    });



    $('.gridBtns').on('click', function()

    {

        var clickedNumber = this.value;

        $(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
            if (!isNaN(clickedNumber) && index < clickedNumber) {
                $(this).show();
                $(this).closest('.option').siblings('.numberAnswer').find('.string').hide();
                $(this).closest('.option').siblings('.numberAnswer').find('.answertxt').show();

            } else {

                $(this).hide();

            }

        });

        if (clickedNumber === 'True or False') {

            $(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
            $(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();
            $(this).closest('.option').siblings('.numberAnswer').find('.string').show();
           ...