Script in view only affect one item in a list

Question

I have this view here which affects textboxfields based on the state of a radiobutton:

<script src="/Scripts/jquery-1.7.1.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
    function doState1() {
        alert("state1 radio button has been clicked");
        $("#field1").attr("disabled", "disabled");
        $("#field2").removeAttr("disabled");
        $("#field3").removeAttr("disabled");
    }
    function doState2() {
        alert("state2 radio button has been clicked");
        $("#field1").removeAttr("disabled");
        $("#field2").attr("disabled", "disabled");
        $("#field3").attr("disabled", "disabled");
    }

    $(document).ready(function ()
    {
        alert("The document is ready");
        if ($("#state1").is(":checked")) {
            doState1();
        } else {
            doState2();
        }

        $("#state1").click(function (){
            doState1();
        });
        $("#state2").click(function () {
            doState();
        });
    });
</script>

The main problem is that my view is populated by a list of items and only the first item in the list is actually affected by this script. Why? I have tried putting (this) statement here and there, thinking that it would affect the mentioned item, but it has not changed a thing.

Here's the for loop so that you will see what actually happens:

<p>
    @using (Html.BeginForm("ConfirmSendItems", "Inventory"))
    {
        (...)

        <table>

           (...)

            @for (int i = 0; i < Model.Count; i++)
            {
                <p>
                    <tr>
                        <td>@Html.DisplayFor(x => x[i].otrObj.objName)</td>
                        <td>@Html.RadioButtonFor(x => x[i].m_state1, "State 1", new {id = "state1", style ="width: 50px"})</td>
                        <td>@Html.RadioButtonFor(x => x[i].m_state1, "State 2", new {id = "state2", style ="width: 50px"})</td>
                        <td>
                            @Html.TextBoxFor(x => x[i].m_Field1, new{id = "field1", style = "width:200px"})
                        </td>
                        <td>
                            @Html.TextBoxFor(x => x[i].m_Field2, new {id = "field2", style = "width:200px"})
                        </td>
                        <td>
                            @Html.TextBoxFor(x => x[i].m_Field3, new {id ="field3", style = "width:200px" })
                            @Html.ValidationMessageFor(x => x[i].m_FixedPrice, "Fixed Price must be a number.")
                        </td>
                    (...)
                </p>
            }
        </table>
        <input type="submit" value="Ready!"/>
    }
</p>

Answer 1

Ids are singular. Only one item can have the id.

You are going to have to use classnames in your selectors and you will have to build in logic to select the right items.