jQuery code not working in firefox or chrome selector value match mismatch script

Question

This bit of code was helped along by a few folks. works great in jsFiddle but when I try to run it locally against some live code it fails... I have been working with it for 5 hours and I cannot see what might be missing. I have added the jquery script, the style container and the form/table structure.

<script type="text/javascript">
$(document).ready(function() {
"use strict";

$('#addForm').bind('change', function(evt) {
    $('td.mismatch', this).removeClass('mismatch');

    var selects = $('select', this);
    $(selects).each(function() {
        var that = this;
        $(selects).not(this).each(function() {

            // we have a similar select
            if ($(this).val() !== '' && $(this).val() === $(that).val()) {
                // now compare inputs
                var
                    thisInputs = $('#grouperCost , #casePackForGroups', $(this).closest('tr')),
                    thatInputs = $('#grouperCost , #casePackForGroups', $(that).closest('tr'));

                $(thisInputs).each(function(i) {
                    if ($(this).val() !== $(thatInputs).eq(i).val()) {
                        $(this).closest('td').addClass('mismatch');
                        $(thatInputs).eq(i).closest('td').addClass('mismatch');
                    }
                });
            }
        });
    });
});
}());
</script>

<style>.mismatch {background: #ff9999;}</style>

<form name="form1" ID="addForm" action="array_script.cfm">
<table>
<tr>
    <td>
        <select name="selectA">
            <option id="A" value="">None</option>
            <option id="A" value="A">A</option>
            <option id="A" value="B">B</option>
            <option id="A" value="C">C</option>
        </select>
    </td>
    <td>
        <input ID="grouperCost" type="text" name="price" value="8.99" />
    </td>
    <td>
        <input ID="casePackForGroups" type="text" name="perCase" value="4" />
    </td>
</tr>
<tr>
    <td>
        <select name="selectB">
            <option id="B" value="">None</option>
            <option id="B" value="A">A</option>
            <option id="B" value="B">B</option>
            <option id="B" value="C">C</option>
        </select>
    </td>
    <td>
        <input  ID="grouperCost" type="text" name="price" value="8.98" />
    </td>
    <td>
        <input  ID="casePackForGroups" type="text" name="perCase" value="5" />
    </td>
</tr>
<tr>
    <td>
        <select name="selectC">
            <option id="C" value="">None</option>
            <option id="C" value="A">A</option>
            <option id="C" value="B">B</option>
            <option id="C" value="C">C</option>
        </select>
    </td>
    <td>
        <input  ID="grouperCost" type="text" name="price" value="8.99" />
    </td>
    <td>
        <input  ID="casePackForGroups" type="text" name="perCase" value="4" />
    </td>
</tr>
</table>
</form>

Answer 1

I have no answer but I found some strange passages in you code.

You Write this:

    var selects = $('select', this);//select ALL select + the form element     $(selects).each(function() { //cycle an all elements

Why do you add the current form to the select collection?

Why do you use 'equality without type coercion' (===) operators? Are they necessary?

Have you tried to debug with firefox 'step by step' ?

Why don't you write a log in a variable or textbox and compare the result with the same code executed on jsFiddle?

Hope it helps.