JQuery .each() Function assigning the same ID for children elements (not iterating?)

Question

I am trying to iterate through a list of children elements and pass their encrypted IDs via AJAX to my controller to update display order on drop using jQuery Sortable. jQuery is selecting the correct amount of child elements but it is assigning the same ID from the dragged and dropped item to both items in my array. I'm not sure what's going on.. I would really appreciate the help! Thanks

JS Code:

$(document).ready(function () {
       
        $(".reqconsentList").sortable({
            axis: 'y',
            update: function (event, ui) {

                var consentForms = [];

                $(this).children().each(function (index) {
                    consentForms.push({ 'id': $('#ConsentID').val(), 'position': index + 1 });
                 
                });
                
                var data = { 'sortedConsentForms': consentForms };
                //debugger;
                // POST to server using $.post or $.ajax
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: '@Url.Action("UpdateConsentDisplayOrder", "Check", new { Area = "Administration" })'
                });
            }
        });
});

Answer 1

First problem is that $('#ConsentID').val() would return the value from the first element with that id. ID needs to be Unique.

Changing the jquery to class would be correct, but the code would still not know what "element" it should get the data from.

So we need to tell it search for the .reqconsentList , to look for child with the class .ConsentID

This is done this way: $(this).find('.ConsentID').val()