I'm trying to post the value of the textbox that is clicked, back to the controller. My problem is, no matter what textbox is clicked, the form only posts back the first item within the list. I know I could've used a dropdownlist instead but I ultimately decided against it.

I've got a view where I'm looping through a `List<SelectListItem>`. Within this loop, I'm creating a textbox for another model property(`string`) and setting the value of the property to an item within the `List<SelectListItem>`. I've set the textboxes as readonly and added jquery to submit the form when a textbox is clicked.

The commented JQuery which posts the value of the textbox to the console works fine. It's posting back to the controller where I'm having the issue. I think the problem might be because the JQuery postback is not recognising each individual textbox and instead posts the first item in the list - I might be wrong.

Any help would be greatly appreciated

Here is the view:

```
 @model TheConnector.ViewModel.SelectAHero
    @{
        ViewBag.Title = "Heroes";
        ViewBag.Message = "Here are the Heroes that are currently registered with your account";
    }
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type="text/javascript">

            $(document).ready(function () {
                $('.postHeroSelection').click(function () {
                    $(this).closest('form').submit();
                });
            });

    //        $(document).ready(function () {
    //            $('.postHeroSelection').click(function () {
    //                console.log($(this).val());
    //            });
    //        });

        </script>
    }
    <noscript>
        <style>
            body
            {
                display: none;
            }
        </style>
        <meta http-equiv="refresh" content="0;url=javascript-error.htm" />
    </noscript>
    <div class="full grey_bg auto-height">
        <!-- Full -->
        <div class="content">
            <!-- Content -->
            <div class="container" style="background-color: #ddd">
                <div style="padding: 0px; border: 0px solid black; height: 100px; margin: 0; padding: 10px;">
                    <div style="float: left; border: 0px solid black; padding: 0 0; height: 100%; display: table;">
                        <h2>@ViewBag.Message</h2>
                    </div>
                </div>
                @Html.ValidationMessageFor(m => m)
                <div id="RegisterNewHero">
                    @using (Html.BeginForm("Heroes", "User", FormMethod.Post))
                    {

                        <h3>
                            Please click on one of the following to load a Hero:</h3>
                        <br />

                        for (var i = 0; i < Model.ListOfHeroes.Count; i++)
                        { 
                        @Html.TextBoxFor(m => m.chosenHero, new { @class = "postHeroSelection", onclick = "return false", @Value = Model.ListOfHeroes[i].Value.ToUpper(), @readonly = "readonly", @id = Model.ListOfHeroes[i].Value })
                        <br />
                        <br />
                        }

                        <br />
                        <br />
                        <br />

                    }
                </div>
                <!-- Register -->
                <div class="clear">
                </div>
            </div>
            <!-- / Content -->
        </div>
        <!-- Full  -->
    </div>

```

Here is the controller:

```
            [Authorize]
            [HttpPost]
            public ActionResult Heroes(SelectAHero model) {

             if(ModelState.IsValid){

                return RedirectToAction("Index", "User");
    }
        else
{     
                 ModelState.AddModelError("","An error has occurred");

             return View(model);
             }
}

```