conditional formating table jquery : I have a quiz with 9 skills, and 1 skill has 2 questions - total 18 questions
So when ppl submit the quiz, the result table returns 4 ranges (Rangea,b,c,d). So based on the score, I want to highlight the row for each skill

[result table][1]
  [1]: https://i.stack.imgur.com/rPt5b.png


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function($) {
        var sum = 0;
    	var numberQA = 2
        $('.skillA:checkbox').click(function() {
            sum = 0;
            $('.skillA:checkbox:checked').each(function(idx, elm) {
                sum += parseInt(elm.value, 10);
            });				
    		average = sum / numberQA;   
    		$('#totalSkillA').html(average);    		
        });
        
    	$('tbody tr td:not(":third")').each(
    		function() {
    			var rangeA = 1,
    				rangeB = 2,
    				rangeC = 3,
    				rangeD = 4,
    				score = $(#totalSkillA).value();
    			
    			if (score < rangeA) {
    				$(#totalSkillA).addClass('avg');
    			}
    			else if (score < rangeB && score >= rangeA) {
    				$(#totalSkillA).addClass('avg');
    			}
    			else if (score >= rangeB && score < rangeC) {
    				$(#totalSkillA).addClass('avg');
    			}
    			else if (score >= rangeC && score <= rangeD) {
    				$(#totalSkillA).addClass('avg');
    			}
    		});

<!-- language: lang-css -->

    @charset "UTF-8";
    body, td, th, input {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }

    .avg {
        background-color: #060;
    }

    .liveSample {
    	background-color: #FFFFCC;
    	color: black;
    	padding: 4px;
    	margin-left: 10px;
    	margin-right: 10px;
    	border: 1px solid #000000;
    }
    .demoDiv {
    	background-color: #CCCCCC;
    	width: 2000px;
    }
    .highlited {
    	background-color: #FFFFCC;
    	color: #000000;
    }
    .grayBG {
    	background-color: #CCCCCC;
    }

    pre {
    	font-family: "Courier New", Courier, monospace;
    	background-color: #F0F7FE;
    	padding: 5px;
    	overflow: auto;
    	font-size: 1.1em;
    	margin-left: 10px;
    	margin-right: 10px;
    	border: 1px solid #CCCCCC;
    	}
    h3 {
    	background-color: #F3F3F3;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	padding-left: 10px;
    	font-size: 100%;
    	line-height: 150%;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #CCCCCC;
    }
    h4{
    	color: #000099;
    	font-variant: small-caps;
    	font-size:120%;
    }
    td, th{
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #CCCCCC;
    	padding-top: 5px;
    	padding-right: 10px;
    	padding-bottom: 5px;
    	padding-left: 10px;
    }
    th {
    	background-color: #F3F3F3;
    	vertical-align: top;
    }
    a {
    	text-decoration: none;
    }

<!-- language: lang-html -->

    <form name="readiness" method="post">
            
            Navigate:
            <a href="#" onclick="sp5.showFirstPanel(); return false;">First</a> |
            <a href="#" onclick="sp5.showPreviousPanel(); return false;">Previous</a> |
            <a href="#" onclick="sp5.showNextPanel(); return false;">Next</a> |
            <a href="#" onclick="sp5.showLastPanel(); return false;">Last</a>
            </p>
            <p>&nbsp;</p>
            <div id="example5" class="SlidingPanels" tabindex="0">
                <div class="SlidingPanelsContentGroup">
            
                    <div class="SlidingPanelsContent p1">
                            <div class="demoDiv" style="background-color: #E6E6E6">
                                <table width="650">						

    					<!-- Skill A -->
                            <!-- Question 1 -->							
                                    <tr>
                                        <td width="400">
                                            <h4>1. My need to take this course now is:</h4>
    									
                                            <p><input class="skillA" type="checkbox" value="4" name="q1A" id="q1" onclick="if(this.checked) {document.readiness.q1B.checked=false;document.readiness.q1C.checked=false;document.readiness.q1D.checked=false;} showHide('feedback1', this);"/> A. High. I need it immediately for a specific job goal.</p>
                                            <p><input class="skillA" type="checkbox" value="3" name="q1B" id="q1" onclick="if(this.checked) {document.readiness.q1A.checked=false;document.readiness.q1C.checked=false;document.readiness.q1D.checked=false;} showHide('feedback1', this);"/> B. Moderate.  I could take it on campus later or substitute another course.</p>
                                            <p><input class="skillA" type="checkbox" value="2" name="q1C" id="q1" onclick="if(this.checked) {document.readiness.q1A.checked=false;document.readiness.q1B.checked=false;document.readiness.q1D.checked=false;} showHide('feedback1', this);"/> C. Low. It could be postponed. </p>
    										<p><input class="skillA" type="checkbox" value="1" name="q1D" id="q1" onclick="if(this.checked) {document.readiness.q1A.checked=false;document.readiness.q1B.checked=false;document.readiness.q1C.checked=false;} showHide('feedback1', this);"/> D. Low. It could be postponed. </p>
                                        
    									</td>
                                        <td width="250">
                                            <div id="feedback1" style="visibility:hidden">
                                            <strong>Why this is important:<br></strong> Generally, the more urgently you need to take an online course, the more motivated you'll be, and therefore more successful. If you have a strong reason for taking an online course, like a job goal, you're more motivated to spend the time to complete it.
                                            </div>
                                        </td>
                                    </tr>
                            <!-- End question 1 -->
                                
                            <!-- Question 2 -->
                                    <tr>
                                        <td width="400">
                                            <h4>2. Considering my work and personal schedule, the amount of time I have to work on an online course is:</h4>
                                        
                                            <p><input class="skillA" type="checkbox" value="4" name="q2A" id="q2" onclick="if(this.checked) {document.readiness.q2B.checked=false;document.readiness.q2C.checked=false;document.readiness.q2D.checked=false;} showHide('feedback2', this);" />A. More than for a traditional course at the college.</p>
                                            <p><input class="skillA" type="checkbox" value="3" name="q2B" id="q2" onclick="if(this.checked) {document.readiness.q2A.checked=false;document.readiness.q2C.checked=false;document.readiness.q2D.checked=false;} showHide('feedback2', this);" />B. The same as for a traditional course at the college.</p>
                                            <p><input class="skillA" type="checkbox" value="2" name="q2C" id="q2" onclick="if(this.checked) {document.readiness.q2A.checked=false;document.readiness.q2B.checked=false;document.readiness.q2D.checked=false;} showHide('feedback2', this);" />C. Less than for a traditional course at the college.</p>
    										<p><input class="skillA" type="checkbox" value="1" name="q2D" id="q2" onclick="if(this.checked) {document.readiness.q2A.checked=false;document.readiness.q2B.checked=false;document.readiness.q2C.checked=false;} showHide('feedback2', this);" />D. Less than for a traditional course at the college.</p>
                                        </td>
                                        <td width="250">
                                        <div id="feedback2" style="visibility:hidden">
                                        <strong>Why this is important:<br></strong> Allowing more study time while you're taking an online course is a good idea, partly because it may take a while to get used to the way it works, and partly because there's generally more reading and writing to do in online courses. Of course, when you work on your course is up to you.
                                        </div>
                                        </td>
                                    </tr>
    							</div>	
                            <!-- End question 2 -->                        
    					<!-- End Skill A -->   	

<!-- end snippet -->

SO if the score is in rangeA, I want the table highlight that section

Please help me
