Star rating system issue

[grahf23]

Hi guys, need some help on a star rating system i am working on. The issue is that i have multiple star rating on a single page but if i click on a star for another field, it will highlight all the previous unlighted stars too. Not sure how to fix it, please help. Below are my codes.

<script type="text/javascript">
function highlightStar(obj) {
    removeHighlight();      
    $('li').each(function(index) {
        $(this).addClass('highlight');
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function removeHighlight() {
    $('li').removeClass('selected');
    $('li').removeClass('highlight');
}

function addRating(obj) {
    $('li').each(function(index) {
        $(this).addClass('selected');
        $('#rating').val((index+1));
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function resetRating() {
    if($("#rating").val()) {
        $('li').each(function(index) {
            $(this).addClass('selected');
            if((index+1) == $("#rating").val()) {
                return false;   
            }
        });
    }
}
</script>
    <table class="db-table1" cellpadding="0" cellspacing="0" align="left" border="1">    
     <tr>
        <td>Field 1</td>
    <td>
    <input type="text" name="rating" id="rating" />
    <ul onMouseOut="resetRating();">
      <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
      <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
      <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
      <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
      <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
    </ul>
    </td>
    </tr>
    <tr>
        <td>Field 2</td>
    <td>  
    <input type="text" name="rating2" id="rating2" />        
    <ul onMouseOut="resetRating();">
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
    </ul>
    </td>
    </tr>
    <tr>
        <td>Field 3</td>
    <td>   
    <input type="text" name="rating3" id="rating3" />    
    <ul onMouseOut="resetRating();">
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
    </ul>
    </td>
    </tr>     
    <tr>
        <td>Field 4</td>
    <td>    
    <input type="text" name="rating4" id="rating4" />    
    <ul onMouseOut="resetRating();">
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
        <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
    </ul>
    </td>
    </tr>