Returning Values to Razor Page – Confused Javascript or .cs?

I’m confused by answers to a similar question, but also I have simplified my app to remove a step in an attempt to make it clearer. I’m hoping someone can steer me in the right direction for what I am doing wrong.

Disclaimer: I am not a Javascript programmer or asp.net programmer. I’m trying, but I am not there yet. If I am asking a question, it’s because even tho I have read a lot of stuff (and always read over anything sent as a suggestion) and asked questions, I am still not understanding or my attempt at getting it to work on my own after looking at said material has not worked. I don’t post questions because I am lazy.

I have an app that it supposed to record votes on a live basis. Ie, someone clicks either the yes, no or abstain radio button and a vote is recorded in the Yes, No or Abstain vote columns. There are 2 types of votes: simple majority and 2/3 majority. These are determined by a DDL. If the DDL choice is Simple Majority, for example and there is a Yes vote cast, the # of votes for simple majority should be recorded in the Yes vote column. This needs to happen for each of the supervisors on the page. Here is my latest screenshot:

Currently, when I click any of the radio buttons on any row, no vote count gets returned in the Yes, No or Abstain columns. Also, if a click a radio button for the first supervisor and then click a radio button for the next supervisor, the first radio button I checked gets unchecked. Somehow, my code is telling the page that ALL radio buttons are in the same group – even tho it should be separate groups – one for each supervisor.

The Vote Header area is from the Vote table, which when joined with the Supervisor table becomes the WorkingVote table. Maybe this is a convoluted way to do it, but I wasn’t sure how else I could join them. The Vote Header (the 6 boxes at the top of the page) are created on their own w/o the rest of the page and saved to the Vote table.

So, on the Enter Votes page, the only thing the user should be doing is clicking each of the radio button groups as supervisors cast their votes to record the votes. Then the user would click an Update button that would post EVERYTHING on this page to the WorkingVote table. Hope that makes sense.

Here is the .cshtml (with my attempt at Javascript):

<form method="post">
    <input hidden asp-for="Vote.VoteId" />
        <div class="border p-3 mt-4">
            <div class="row pb-2">
                <h2 class="text-primary pl-3">Enter Votes</h2>
                <hr />
            </div>
            <div asp-validation-summary="All"></div>
            <table class="table table-borderless" style="width:100%">
                <tr>
                    <td style="width: 15%">
                        <div class="mb-3">
                            <label asp-for="Vote.VoteDate"></label>
                            <input asp-for="Vote.VoteDate" id="VoteDate" type="date" class="form-control" />
                            <span asp-validation-for="Vote.VoteDate" class="text-danger"></span>
                        </div>
                    </td>
                    <td style="width: 10%">
                        <div class="mb-3">
                            <label asp-for="Vote.VoteCode"></label>
                            <input asp-for="Vote.VoteCode" id="VoteCode" type="text" class="form-control" />
                            <span asp-validation-for="Vote.VoteCode" class="text-danger"></span>
                        </div>
                    </td>
                    <td style="width: 75%">
                        <div class="mb-3">
                            <label asp-for="Vote.VoteDesc"></label>
                            <input asp-for="Vote.VoteDesc" id="VoteDesc" class="form-control" />
                            <span asp-validation-for="Vote.VoteDesc" class="text-danger"></span>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-borderless" style="width:100%">
                <tr>
                    <td style="width: 25%">
                        <div class="mb-3">
                            <label asp-for="Vote.SupervisorStatus"></label>
                            <select asp-for="Vote.SupervisorStatus" id="SupervisorStatus" class="form-select" asp-items="@(new SelectList(Model.DisplayStatusData.OrderBy(x => x.StatusDesc),"StatusDesc", "StatusDesc"))" onchange="assignSupervisorData()">
                                <option value="" selected disabled>---Select Supervisor Status---</option>
                            </select>
                        </div>
                    <td style="width: 25%">
                        <div class="mb-3">
                            <label asp-for="Vote.VoteType"></label>
                                <select asp-for="Vote.VoteType" id="VoteType" class="form-select" asp-items="@(new SelectList(Model.DisplayVoteTypeData.OrderBy(x => x.VoteTypeDesc),"VoteTypeDesc", "VoteTypeDesc"))" >
                                <option value="" selected disabled>---Select Vote Type---</option>
                            </select>
                        </div>
                    </td>
                    <td style="width: 50%">
                        <div class="mb-3">
                            <label asp-for="Vote.Committee"></label>
                                <select asp-for="Vote.Committee" id="Committee" class="form-select" asp-items="@(new SelectList(Model.DisplayCommitteeData.OrderBy(x => x.CommitteeDesc),"CommitteeDesc", "CommitteeDesc"))">
                                <option value="" selected disabled>---Select Committee---</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>
                            MUNICIPALITY
                        </th>
                        <th>
                            SUPERVISOR
                        </th>
                        <th>
                            SIMPLE
                        </th>
                        <th>
                            2/3
                        </th>
                        <th>
                            ACTIVE VOTE
                        </th>
                        <th>
                            YES
                        </th>
                        <th>
                            NO
                        </th>
                        <th>
                            ABSTAIN
                        </th>
                    </tr>
                </thead>
                <tbody>
                @foreach (var obj in Model.WorkingVote.OrderBy(i => i.Municipality))
                    {
                        <tr width="100%">
                            <td width="14%">
                                <div class="mb-3">
                                    @Html.TextBoxFor(modelItem => obj.Municipality, new
                                    { disabled = "disabled", @readonly = "readonly", @class = "form-control", @style = "width: 125px", id ="Municipality" })
                                </div>
                            </td>
                            <td width="14%">
                                <div class="mb-3">
                                    @Html.TextBoxFor(modelItem => obj.SupervisorName, new
                                    { disabled = "disabled", @readonly = "readonly", @class = "form-control", @style = "width: 175px" })
                                </div>
                            </td>
                            <td width="12%">
                                <div class="mb-3">
                                    @Html.TextBoxFor(modelItem => obj.SimpleMajority, new
                                    { disabled = "disabled", @readonly = "readonly", id = "SimpleMajority", @class = "form-control", @dir = "rtl", @style = "width: 75px" })
                                </div>
                            </td>
                            <td width="12%">
                                <div class="mb-3">
                                    @Html.TextBoxFor(modelItem => obj.TwoThirdsMajority, new
                                    { disabled = "disabled", @readonly = "readonly", id = "TwoThirdsMajority", @class = "form-control", @dir = "rtl", @style = "width: 50px" })
                                </div>
                            </td>
                            <td style="width: 20%">
                                <div class="form-group, mb-3">
                                    @foreach (var item4 in Html.GetEnumSelectList<ActiveVote>())
                                    {
                                        <input type="radio" asp-for="Vote.ActiveVote" value="@item4.Text" onclick="updateVoteData()" />

                                        @item4.Text
                                    }
                                </div>
                            </td>
                            <td width="12%">
                                <div class="mb-3">
                                @Html.TextBoxFor(modelItem => obj.YesVote, new { disabled = "disabled", @readonly = "readonly", id="YesVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
                                </div>
                            </td>
                            <td width="12%">
                                <div class="mb-3">
                                @Html.TextBoxFor(modelItem => obj.NoVote, new { disabled = "disabled", @readonly = "readonly",  id="NoVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
                                </div>
                            </td>
                            <td width="12%">
                                <div class="mb-3">
                                @Html.TextBoxFor(modelItem => obj.AbsVote, new { disabled = "disabled", @readonly = "readonly", id="AbsVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
            <div>
                <button type="submit" class="btn btn-primary" style="width:150px;">Update</button>
                <a asp-page="Index" class="btn btn-secondary" style="width: 150px;">Back to List</a>
            </div>
        </div>
</form>

<div>
    @{
        var prevDisabled = !Model.WorkingVote.HasPreviousPage ? "disabled" : "";
        var nextDisabled = !Model.WorkingVote.HasNextPage ? "disabled" : "";
    }

    <a asp-page="./Index"
       asp-route-pageIndex="@(Model.WorkingVote.PageIndex - 1)"
       class="btn btn-primary @prevDisabled">
        Previous
    </a>
    <br />
    <br />
    <a asp-page="./Index"
       asp-route-pageIndex="@(Model.WorkingVote.PageIndex + 1)"
       class="btn btn-primary @nextDisabled">
        Next
    </a>

</div>

@section Scripts
{
    <script type="text/javascript">

        const votes = [$("#Municipality")];
        var votetype = document.getElementById('VoteType');
        var sm = document.getElementById('SimpleMajority');
        var ttm = document.getElementById('TwoThirdsMajority');
        var radio = document.getElementById('ActiveVote');
        var yes = document.getElementById('YesVote');
        var no = document.getElementById('NoVote');
        var abs = document.getElementById('AbsVote');

        votes.forEach(radio.addEventListener("click", function updateVoteData() {
            if (radio.value === 'Yes' && $("#VoteType").value === 'Simple Majority') {
                radio.value = "Yes";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                yes = $("#SimpleMajority").val();
                $("#YesVote").val(yes);
            }
            elseif(radio.value === 'No' && $("#VoteType").value === 'Simple Majority') {
                radio.value = "No";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                no = $("#SimpleMajority").val();
                $("#NoVote").val(no);
            }
            elseif(radio.value === 'Abstain' && $("#VoteType").value === 'Simple Majority') {
                radio.value = "Abstain";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                abs = $("#SimpleMajority").val();
                $("#AbsVote").val(abs);
            }
            elseif(radio.value === 'Yes' && $("#VoteType").value === '2/3 Majority') {
                radio.value = "Yes";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                yes = $("#TwoThirdsMajority").val();
                $("#YesVote").val(yes);
            }
            elseif(radio.value === 'No' && $("#VoteType").value === '2/3 Majority') {
                radio.value = "No";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                no = $("#TwoThirdsMajority").val();
                $("#NoVote").val(no);
            }
            elseif(radio.value === 'Abstain' && $("#VoteType").value === '2/3 Majority') {
                radio.value = "Abstain";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                abs = $("#TwoThirdsMajority").val();
                $("#AbsVote").val(abs);
            }
            else
                {
                    ''
                }
        }));

    </script>
    <partial name="_ValidationScriptsPartial"/>
}

And here is my .cs for that same page.

[BindProperties]

public class EditModel : PageModel
{
    private readonly ApplicationDbContext _db;
    public Vote Vote { get; set; }
    public ActiveVote ActiveVote { get; set; }
    public Supervisor Supervisor { get; set; }
    public EditModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public PaginatedList<WorkingVote>? WorkingVote { get; set; } = default!;

    public IEnumerable<Committee> DisplayCommitteeData { get; set; }
    public IEnumerable<VoteType> DisplayVoteTypeData { get; set; }
    public IEnumerable<Supervisor> DisplaySupervisorData { get; set; }
    public IEnumerable<Status> DisplayStatusData { get; set; }

    public async Task OnGetAsync(int Id, int? pageIndex)
    {
        Vote = _db.Vote.Find(Id);
        DisplayCommitteeData = await _db.Committee.ToListAsync();
        DisplayVoteTypeData = await _db.VoteType.ToListAsync();
        DisplaySupervisorData = await _db.Supervisor.ToListAsync();
        DisplayStatusData = await _db.Status.ToListAsync();

        IQueryable<WorkingVote> workingVote = (IQueryable<WorkingVote>)(from x in _db.Supervisor
                                           join y in _db.Vote on x.Status equals y.SupervisorStatus
                                           select new WorkingVote
                                           {
                                               VoteId = y.VoteId,
                                               VoteCode = y.VoteCode,
                                               VoteDate = y.VoteDate,
                                               VoteDesc = y.VoteDesc,
                                               VoteType = y.VoteType,
                                               Committee = y.Committee,
                                               Municipality = x.Municipality,
                                               SupervisorName = x.DisplayName,
                                               SimpleMajority = x.Simple,
                                               TwoThirdsMajority = x.TwoThirds,
                                               ActiveVote = y.ActiveVote,
                                               YesVote = y.YesVote,
                                               NoVote = y.NoVote,
                                               AbsVote = y.AbsVote,
                                           }); ;

        int casesPerPage = 20;
        WorkingVote = await PaginatedList<WorkingVote>.CreateAsync(
            workingVote, pageIndex ?? 1, casesPerPage);
    }

    public async Task<IActionResult> OnPost()
    {
        if (ModelState.IsValid)
        {
            _db.Vote.Update(Vote);
            await _db.SaveChangesAsync();
            TempData["success"] = "Votes cast successfully.";
            return RedirectToPage("Index");
        }
        return Page();
    }
}

My questions are:

1. Can I use Javascript to do this? I have gotten conflicting answers.
2. If so, what is wrong on my Javascript?
3. If not, how to I make this work on my .cs?

Thanks so much for understanding.

EDITING TO ADD: Updated Javascript. It is working to update the vote numbers in the Yes, No and Abstain columns now, BUT the app does not REMOVE the vote number in the Yes, No or Abstain columns if the user clicks a different radio button choice. I took out the 2 lines "input.removeAttribute(‘disabled’) "input.value = _value;" as that prohibited selecting another radio button at all. Thinking I need those lines, but have them placed wrong? The user needs to be able to change a radio button to another vote, but when they do, the old vote number needs to be removed from the "old vote" column and added to the new. Right now, the app keeps adding numbers each time you click a radio button. See pic. Row 1, I clicked all 3 radio buttons, rows 2-4 I just clicked once for each row.

Updated Javascript:

    <script type="text/javascript">

        const votes = $(".Municipality");
        $(".updateVoteData").click(function () {
            let _value = event.target.value;
            if (_value === 'Yes' && $("#VoteType")[0].value == 'Simple Majority') {
                _value = "Yes";
                this.checked = true;
                yes = $(this).parent().parent().prev().find(".SimpleMajority").val();
                $(this).parent().parent().parent().find(".YesVote").val(yes);
            } else if (_value === 'No' && $("#VoteType")[0].value == 'Simple Majority') {
                _value = "No";
                this.checked = true;
                no = $(this).parent().parent().prev().find(".SimpleMajority").val();
                $(this).parent().parent().parent().find(".NoVote").val(no);
            } else if (_value === 'Abstain' && $("#VoteType")[0].value == 'Simple Majority') {
                _value = "Abstain";
                this.checked = true;
                abs = $(this).parent().parent().prev().find(".SimpleMajority").val();
                $(this).parent().parent().parent().find(".AbsVote").val(abs);
            } else if (_value === 'Yes' && $("#VoteType")[0].value == '2/3 Majority') {
                _value = "Yes";
                this.checked = true;
                yes = $(this).parent().parent().prev().find(".TwoThirdsMajority").val();
                $(this).parent().parent().parent().find(".YesVote").val(yes);
            } else if (_value === 'No' && $("#VoteType")[0].value == '2/3 Majority') {
                _value = "No";
                this.checked = true;
                no = $(this).parent().parent().prev().find(".TwoThirdsMajority").val();
                $(this).parent().parent().parent().find(".NoVote").val(no);
            } else if (_value === 'Abstain' && $("#VoteType")[0].value == '2/3 Majority') {
                _value = "Abstain";
                this.checked = true;
                abs = $(this).parent().parent().prev().find(".TwoThirdsMajority").val();
                $(this).parent().parent().parent().find(".AbsVote").val(abs);
            }
        })
    </script>