JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div style="display:none;">
</div>
<div id="rrOuterTopBar">
  <div id="rrTopBar">
  </div>
</div>
<div id="rrOuterSurveyContainer">
  <div id="rrSurveyContainer">
    <div id="rrHeader">
      <div id="rrLogo">
        <div></div>
        <span class="mrBannerText" style=""></span>
        <br/>
      </div>
      <div id="rrProgressBar">
        <table style="height: 100%; width: 100%">
          <tr>
            <td style="width: 18%; background-color: #003366" />
            <td class="mrProgressText">18%</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="rrBody">
      <div></div>
      <span class="mrQuestionText" style=""></span>
      <div class="rrQuestionContainer">
        <label for="_Q0">
          <div></div>
          <span class="mrQuestionText" style="">Office-Determine whether to hide or show row on Next click within descreet choice method.<div class="officeHider"></div></span>
        </label>
        <div></div>
        <span style="">
								<div></div>
								<input type="text" name="_Q__02_QofficeRowHide" id="_Q0" class="mrEdit" autocomplete="on" style="margin-left: 1em;" maxlength="2" value=""/>
							</span>
      </div>
      <div class="rrQuestionContainer">
        <label for="_Q1">
          <div></div>
          <span class="mrQuestionText" style="">Skype-Determine whether to hide or show row on Next click within descreet choice method.<div class="skypeHider"></div></span>
        </label>
        <div></div>
        <span style="">
								<div></div>
								<input type="text" name="_Q__02_QskypeRowHide" id="_Q1" class="mrEdit" autocomplete="on" style="margin-left: 1em;" maxlength="2" value=""/>
							</span>
      </div>
      <div class="rrQuestionContainer">
        <div></div>
        <span class="mrQuestionText" style=""><b>DCM CARD:  29</b><br/><br/><div style="font-size:10pt;font-weight:normal;font-family: Verdana;">Here is another option for the Office 365 Skype for Business Calling...

CSS

.styledRadio {
		  float: left;
		  clear: both;
		  margin: 0 3px 3px 0;
		  background-repeat: no-repeat;
		}
		
		.styledCheckbox {
		  float: left;
		  clear: both;
		  margin: 0 3px 3px 0;
		  background-repeat: no-repeat;
		}
		
		label {
		  line-height: 27px;
		  display: inline-block;
		  margin-bottom: 3px;
		}
		
		.mrQuestionText {
		  font-weight: normal;
		}
		
		table.dcmTable {
		  border-collapse: collapse;
		  max-width: 1025px;
		}
		
		table.dcmTable td.firstColumn {
		  text-align: left;
		  border-left: solid 1px #000;
		  padding: 2px;
		}
		
		table.dcmTable td {
		  /*border: solid 1px #000;*/
		  font-size: .79em;
		  font-family: arial;
		  text-align: center;
		  padding: 0;
		  margin: 0;
		}
		
		table.dcmTable td.officeHeader {
		  background-color: #fff2cc;
		  color: #c65911;
		  font-weight: bold;
		  font-size: .81em;
		  text-align: center;
		  border-top: solid 1px #000;
		  border-left: solid 1px #000;
		  border-right: solid 1px #000;
		  border-bottom: none;
		}
		
		span.centerIt {
		  text-align: center;
		  margin: 0 auto;
		  display: inline-block;
		  clear: none;
		  width: 100%;
		}
		
		td.oddOffice {
		  background-color: #cdc7a7;
		  color: #000;
		  border-top: none;
		  border-left: solid 1px #000;
		  border-right: solid 1px #000;
		  border-bottom: none;
		}
		
		td.evenOffice {
		  background-color: #d0cece;
		  color: #000;
		  border-top: none;
		  border-left: solid 1px #000;
		  border-right: solid 1px #000;
		  border-bottom: none;
		}
		
		table.dcmTable td.skypeHeader {
		  background-color: #9bc2e6;
		  font-weight: bold;
		  color: #000;
		  font-weight: bold;
		  font-size: .81em;
		  text-align: center;
		  border-top: solid 1px #000;
		  border-left: solid 1px #000;
		  border-right: solid 1px #000;
		  border-bottom: none;
		}
		
		td.oddSkype {
		  background-color: #fff;
		  color: #000;
		}
		
		td.evenSkype {
		  background-color: #e6e9ee;
		  color: #000;
		}
		
		td.secondSkpeColumn {
		 ...

JavaScript

var rowHider = $('div.officeHider');
			var rowHiderInput = rowHider.closest('div.rrQuestionContainer').find('input[type="text"]');
			var rowHiderSkype = $('div.skypeHider');
			var rowHiderSkypeInput = rowHiderSkype.closest('div.rrQuestionContainer').find('input[type="text"]');

			console.log(rowHider.length);
			console.log(rowHiderSkypeInput.val());

			$('span.officeToggle').on("click", function() {
			  $('td.officeFixed').toggleClass("hideOffice");

			  if ($('div.supportHiderOffice').length > 0) {
			    if (rowHiderInput.val() == "1") {
			      rowHiderInput.val("0");
			      $('input[name="office"]').val("0");
			    } else if (rowHiderInput.val() == "0") {
			      rowHiderInput.val("1");
			      $('input[name="office"]').val("1");			      
			    }
          console.log("notFound");
			  }

			  if (rowHiderInput.val() == "" && $('td.officeEven').is(':hidden')) {
			    rowHiderInput.val("0");
			    $('input[name="office"]').val("0");
			  }

			  if (rowHiderInput.val() == "" && $('td.officeEven').is(':visible')) {
			    rowHiderInput.val("1");
			    $('input[name="office"]').val("1");
			  }
			});

			$('span.skypeToggle').on("click", function() {
			  $('td.skypeFixed').toggleClass("hideSkype");

			  if ($('div.supportHiderSkype').length > 0) {
			    if (rowHiderSkypeInput.val() == "1") {
			      rowHiderSkypeInput.val("0");
			      $('input[name="skype"]').val("0");
			    } else if (rowHiderSkypeInput.val() == "0") {
			      rowHiderSkypeInput.val("1");
			      $('input[name="skype"]').val("1");
			    }
			  }

			  if (rowHiderSkypeInput.val() == "" && $('td.evenSkype').is(':hidden')) {
			    rowHiderSkypeInput.val("0");
			    $('input[name="skype"]').val("0");
			  }

			  if (rowHiderSkypeInput.val() == "" && $('td.evenSkype').is(':visible')) {
			    rowHiderSkypeInput.val("1");
			    $('input[name="skype"]').val("1");
			  }
			});

			var $mrTable =...