How to Match Javascript id to my table view id

Question

I need to have the same id tag as what is in my view table below in my code where the 'somethinghere' is at is where I could use some help this needs to match the same value number as myRow for some reason it does not work. Any ideas?

<script src="~/Scripts/jquery-3.7.1.min.js"></script>

 <script type="text/javascript">

    $(document).ready(function () {
        var myRow = 0;
        $('.btnAddRecords').each(function () {
            myRow = myRow + 1;
            $(this).attr("id", "btnAddRecords" + myRow).click(function () {
                AddStudentRecords();
            })
        });
        $("#btnSaveData").click(function () {
            SaveStudentRecords();
        });
    });

    function AddStudentRecords() {
        var StudentRecords = "<tr><td>" + $("#txtSubject" + ***somethinghere***).val() + "</td><td>" +
                   $("#txtMarks" + ***somethinghere***).val() + "</td></tr>";
        $("#tableStudentRecords").last().append(StudentRecords);
    }

    function SaveStudentRecords() {
        var listOfStudentDetailModels = new Array();
        $("#tableStudentRecords").find("tr:gt(0)").each(function () {
            var Subject = $(this).find("td:eq(0)").text();
            var Marks = $(this).find("td:eq(1)").text();

            var Content = {}
            Content.Content_Name = Subject;
            Content.FieldID = Marks;
            listOfStudentDetailModels.push(Content);
        });

        $.ajax({
            async: true,
            type: "POST",
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            url: "/Home/HomeView",
            data: JSON.stringify(listOfStudentDetailModels),
            success: function (data) {
                alert(data);
            },
        })
    }
   </script>

   <h2>Index</h2>

     <table>

    <tr>
        <td>
            Subject
        </td>
        <td>
            Marks
        </td>

    </tr>
    @{
        int i = 3;
        foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Content_Name)
                    @Html.HiddenFor(modelItem => item.Content_Name, new { id = "txtSubject" + i })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContentID)
                    @Html.HiddenFor(modelItem => item.ContentID, new { id = "txtMarks" + i })
                </td>
                <td>
                    <input class="btnAddRecords" type="button" id="btnAddRecords" value="Add" />

                </td>
            </tr>
            i += 1;
        }
    }
    </table>

    <table class="table-condensed" style="width: 100%" id="tableStudentRecords">
    <thread>
        <tr>
            <th>
                Subject
            </th>
            <th>
                Marks
            </th>
        </tr>
    </thread>
    </table>
    <input type="button" value="Save Data" name="SaveData" id="btnSaveData" class="btn btn-primary" />

If I replace somethinghere with hard coded values like 3 or 4 then it works for that but iy need the values to each be unique so when I click on the add button it pulls the values that correspond to that particular row.

Answer 1

I figured out how to fix the issue with matching the IDs in your code. The problem was that when you clicked the "Add" button, it didn't know which row's input fields to pull the values from. To solve this, we need to make sure the button passes the correct row number to the function that adds the student records.

Here's how it works:

We use a counter (myRow) that goes up by one for each row. This counter gives a unique ID to each "Add" button. When you click an "Add" button, it now passes its unique row number to the AddStudentRecords function. The AddStudentRecords function uses this row number to find the right input fields and get their values.

Here's the updated code:

<script src="~/Scripts/jquery-3.7.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var myRow = 0;
        $('.btnAddRecords').each(function () {
            myRow = myRow + 1;
            $(this).attr("id", "btnAddRecords" + myRow).click(function () {
                AddStudentRecords(myRow);
            })
        });
        $("#btnSaveData").click(function () {
            SaveStudentRecords();
        });
    });

    function AddStudentRecords(row) {
        var StudentRecords = "<tr><td>" + $("#txtSubject" + row).val() + "</td><td>" +
                   $("#txtMarks" + row).val() + "</td></tr>";
        $("#tableStudentRecords").last().append(StudentRecords);
    }

    function SaveStudentRecords() {
        var listOfStudentDetailModels = new Array();
        $("#tableStudentRecords").find("tr:gt(0)").each(function () {
            var Subject = $(this).find("td:eq(0)").text();
            var Marks = $(this).find("td:eq(1)").text();

            var Content = {}
            Content.Content_Name = Subject;
            Content.FieldID = Marks;
            listOfStudentDetailModels.push(Content);
        });

        $.ajax({
            async: true,
            type: "POST",
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            url: "/Home/HomeView",
            data: JSON.stringify(listOfStudentDetailModels),
            success: function (data) {
                alert(data);
            },
        })
    }
</script>

<h2>Index</h2>

<table>
    <tr>
        <td>Subject</td>
        <td>Marks</td>
    </tr>
    @{
        int i = 3;
        foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Content_Name)
                    @Html.HiddenFor(modelItem => item.Content_Name, new { id = "txtSubject" + i })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContentID)
                    @Html.HiddenFor(modelItem => item.ContentID, new { id = "txtMarks" + i })
                </td>
                <td>
                    <input class="btnAddRecords" type="button" value="Add" />
                </td>
            </tr>
            i += 1;
        }
    }
</table>

<table class="table-condensed" style="width: 100%" id="tableStudentRecords">
    <thead>
        <tr>
            <th>Subject</th>
            <th>Marks</th>
        </tr>
    </thead>
</table>
<input type="button" value="Save Data" name="SaveData" id="btnSaveData" class="btn btn-primary" />

So, by passing the myRow value to the AddStudentRecords function, we make sure that it grabs the right values from the correct input fields. This way, everything matches up correctly, and the data is added as expected.