JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<div id="divForm">
	<div id="divFeedbackHead">
		<table id="tblFeedbackHead">
			<tr>
				<td id="tdFeedbackHeader" colspan="4">360 Degree Feedback</td>
			</tr>
			<tr>
				<td class="FeedbackHeaderCol1">Staff Name:</td>
				<td class="FeedbackHeaderCol2">Ken Lim</td>
				<td class="FeedbackHeaderCol3">You are rating this person as his/her:</td>
				<td class="FeedbackHeaderCol4">Subordinate</td>
			</tr>
			<tr>
				<td class="FeedbackHeaderCol1">Designation:</td>
				<td class="FeedbackHeaderCol2">Senior Executive(Career, Performance & Total Rewards Management)</td>
				<td class="FeedbackHeaderCol3">Division/Department:</td>
				<td class="FeedbackHeaderCol4">Human Resource</td>
			</tr>
		</table>
	</div>
	<br/>
	<div id="divNote">
		Please indicate at least one and up to 3 <span class="bold">strengths</span> and <span class="bold">developmental areas.</span>
	</div>
	<br/>
	<div>
		<table id="tblSurveForm">
			<tr class="SurveFormHeader">
				<td class="MinlawValueCol">Minlaw's Value</td>
				<td class="BehavioralStatementCol">Behavioral Statements</td>
				<td class="OptionsCol">Not Applicable</td>
				<td class="OptionsCol">Never</td>
				<td class="OptionsCol">Seldom</td>
				<td class="OptionsCol">Sometimes</td>
				<td class="OptionsCol">Usually</td>
				<td class="OptionsCol">Always</td>
				<td class="ChkCol">Key Strength (Select 1 - 3)</td>
				<td class="ChkCol">Developmental Area (Select 1 - 3)</td>
			</tr>
			<tr class="FirstRow">
				<td class="MinlawValue">Integrity</td>
				<td class="BehavioralStatementCol">
					<input type="hidden" value="101"/>
					Officer acts with honesty and impartiality.
				</td>
				<td class="OptionsCol"><input type="radio" name="Opt101" value="0" /></td>
				<td class="OptionsCol"><input type="radio" name="Opt101" value="1" /></td>
				<td class="OptionsCol"><input type="radio" name="Opt101" value="2" /></td>
				<td class="OptionsCol"><input type="radio" name="Opt101" value="3" /></td>
				<td...

CSS

#divForm table{
	border-collapse:collapse;
	border-spacing:0px;
}

#divForm{
	padding:10px;
	width:1200px;
}

tr.SurveyItem > td, #tblSurveyEntry td, .SurveFormHeader td, #tblFeedbackHead td{
	border:1px solid black;
	vertical-align:top;
}

.MinlawValueCol{
	width:70px;
}

.BehavioralStatementCol{
	width:270px;
}

.OptionsCol, .ChkCol{
	width:20px;
	text-align:center;
}

#tblFeedbackHead{
	width:900px;
}

#tblSurveForm{
	width:1200px;   
}
#tblSurveyEntry{
	width:1130px;
}

#divForm,#tblFeedbackHead{
	margin-left:auto;
	margin-right:auto;
}

.FeedbackHeaderCol2,.FeedbackHeaderCol4,.MinlawValue{
	color:#529df4;
}

#tdFeedbackHeader, .SurveFormHeader td, .MinlawValue{
	font-weight:bold;
}

#tdFeedbackHeader{
	text-align:center;
    background-color:#d9d9d9;
}

#divNote{
	font-style: italic;
}

.LastRow td{
	border-bottom:solid black 1px;
}

.altRow td.BehavioralStatementCol,
.altRow td.OptionsCol,
.altRow td.ChkCol{
	background-color:#e8e8ff;
}

.ChkCol{
	border-left:1px solid black;
	border-right:1px solid black;
}

JavaScript

$('.Strength').click(function(){
	if($('.Strength:checked').length>3){
		alert('Limit exceeded.');
        $(this).prop('checked', false);
	}
});


$('.Development').click(function(){
	if($('.Development:checked').length>3){
		alert('Limit exceeded.');
        $(this).prop('checked', false);
	}
});

$('.ChkCol input').click(function(){
    if($(this).prop('checked')){
        var opposite = $(this).hasClass('Strength')?'Development':'Strength';
		$(this).closest('tr').find('.ChkCol input.'+opposite).prop('checked', false);
    }
});