JSFiddle - React, Tailwind, and code Playground
by Osman Salihovic
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'));
$('.optionTypeTbl').css({
left: $(this).position().left,
top: $(this).position().top + 20
});
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" );
$( this ).closest( '.optionTypeTbl' ).siblings('input[name=gridValues[]]').val( $( this ).val( ) );
$( this ).closest( '.optionTypeTbl' ).siblings('span[name=gridValues[]]').val( $( this ).val( ) );
$( '.optionTypeTbl' ).hide( );
});
var prevButton;
$('.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();
} else {
//$(this).hide();
$(this).removeClass('answerBtnsOn');
$(this).addClass('answerBtnsOff');
}
var $this = $(this);
var context = $this.parents('.optionAndAnswer');
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ?...