Select all PrimeFaces Radio Button using Custom Layout in a DataTable with Grouping and HeaderRow

I am trying to get a button at the top of each section to fill in the N/A radios for just that section when clicked using JavaScript. I am using PrimeFaces V12 p:selectOneRadio with a custom layout within a p:dataTable that uses groupBy on a p:headerRow. My JavaScript function seems to be altering the selected stated of the radio but the view doesn't reflect that. Even when I submit the form to the JSF backing bean, thinking the radios might actually selected but just not visually showing as, alas, the radios are NOT actually selected.

    <p:dataTable id="ynnrCheckListId"
        value="#{cc.attrs.checklistQuestions}" var="qAndA">

        <p:headerRow groupBy="#{qAndA.checklistAttribute.attributeCategory.id}">
            <p:column colspan="8" sortOrder="#{qAndA.checklistAttribute.attributeCategory.headerText}">
            <h:outputText value="#{qAndA.checklistAttribute.attributeCategory.headerText}" />
            </p:column>

            <p:column colspan="1">
                <p:button itemLabel="This Section Not Applicable" 
                    onclick="doAll(#{qAndA.checklistAttribute.attributeCategory.id}); return false;">
                </p:button>
            </p:column>

... within the Yes column I define the custom layout selectOneRadio

        <p:column headerText="Yes" width="50">
            <p:selectOneRadio id="yesNoNA" value="#{qAndA.toggleValue}" layout="custom" unselectable="true" styleClass="ppp">
                <f:selectItem itemLabel="Yes" itemValue="YES" />
                ...
                <f:selectItem itemLabel="NA" itemValue="NA" />
            </p:selectOneRadio>

            <div align="center">
                <p:radioButton id="yes" for="yesNoNA" itemIndex="0" rendered="#{empty qAndA.toggleValue}"
                    disabled="#{not cc.attrs.checklistInstance.checklistEditable}" />
                <h:outputText style="color: #000; font-size: 24px;" styleClass="fa-solid fa-check"
                    rendered="#{qAndA.toggleValue == 'YES'}" />
                <h:outputText value=""
                    rendered="#{qAndA.toggleValue == 'NO_MAJOR' or qAndA.toggleValue == 'NO_MINOR' or qAndA.toggleValue == 'NA' or qAndA.toggleValue == 'RESOLVED_MAJOR' or qAndA.toggleValue == 'RESOLVED_MINOR'}" />
            </div>
        </p:column>

...

    <p:column headerText="N/A" width="50">
        <div align="center">
            <p:radioButton id="na" widgetVar="na" for="yesNoNA" itemIndex="4" rendered="#{empty qAndA.toggleValue}"
                disabled="#{not cc.attrs.checklistInstance.checklistEditable}"
                styleClass="#{qAndA.checklistAttribute.attributeCategory.id}" />
            <h:outputText style="color: #000; font-size: 24px;" styleClass="fas fa-times" rendered="#{qAndA.toggleValue == 'NA'}" />
        </div>
    </p:column>

...

Setting the styleClass for the NA p:radioButton (above) to the section category id was a way to find just the radios in each section. The section category id got set in Div's classname that wrapped each row of radios.

function doAll(divClass)
{
    var divs = document.getElementsByClassName(divClass);
    for (const div of divs) {

        $(div).find('input:radio').each(function() {

            console.log($(this).attr('id') );
            console.log("radio value " + $(this).val());
            console.log("is radio checked? " + $(this).prop('checked'));

            $(this).prop('checked', true);

            console.log("Now is radio checked? " + $(this).prop('checked'));
            $(this).trigger('click');
            $(this).trigger('change');

            console.log("");

        });
    }

}

assignmentForm:accordion:stageGate1:ynnrCheckListId:0:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

assignmentForm:accordion:stageGate1:ynnrCheckListId:1:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

assignmentForm:accordion:stageGate1:ynnrCheckListId:2:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

assignmentForm:accordion:stageGate1:ynnrCheckListId:3:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

When I manually select one of the NA radios and then click the NA all button, I get true for the checked property before programmatically applying the radio property checked to true. So I feel I am working on the correct HTML objects.

assignmentForm:accordion:stageGate1:ynnrCheckListId:0:yesNoNA:4_clone
radio value NA
is radio checked? true
Now is radio checked? true

Any ideas?

from Select all PrimeFaces Radio Button using Custom Layout in a DataTable with Grouping and HeaderRow