Multiple Partial view and javascript

Question

I am trying to create a paginated report with multiple KPI in a table using MVC, C#,and JavaScript. In order to accomplish this, I created a partial view, with a view model to represent the KPI component. I have a small JavaScript file with a document ready function to set the color of the KPI component. I load them like this.

<td style="width:30px">
    @Html.Partial("Element", new ElementReadings((decimal)item.NLow,
         (decimal)item.NHigh, (decimal)item.N_PCT))
</td>
<td style="width:30px">
     @Html.Partial("Element", new ElementReadings((decimal)item.NALow,
          (decimal)item.NAHigh, (decimal)item.Na_PCT))
</td>

My problem is the java script only runs on the first row of table. I have tried including the java script file in the partial view (which loads the same file every time according to viewing the page source) but it does not seem to fire except on the first row. I even tried to include the java script directly in the cshtml file, again no love. I am not well versed in web based programming, and looking for any advice. My next step in a windows app would be looping through all the controls on the form, getting their name or some property, then run a function against what I found. Not sure if that is possible with java script and the DOM (?). Guess I will find out. cheers bob

Edit here is the java script code.

$(document).ready(function () {

var high = $('#high').val();
var low = $('#low').val();
var actualValue = $('#actualValue').val();

if (high > actualValue) {
    $('#HighTextBox').addClass("redBackgroud");

}
else {
    if (low < actualValue) {
        $('#LowTextbox').addClass("redBackgroud");
    }
    else {
        $('#MediumTextbox').addClass("greenBackground");
    }
}

})

Answer 1

I think Stephen is correct, and I do not fully understand how html is rendered. I solved the problem on the server side when assigning values to the text boxes. Thanks for everyone's help and comments.