I currently have an issue where any changes I made on the controlling field (Stage field), the dependent field (Reason for Closure) is not changing on the visualforce page.

This part is were I change the stage to Closed -Lost, the dependency field, Reason for Closure is enabled and use can choose the reason
table 1

However, if the expectation is that the Reason for Closure field at the bottom should also change, but it is not changing.
changing value to all opps

This code is for the fields applied at the top to all member opps

<apex:form >        
        <apex:pageBlock >
            <apex:dataList id="fieldsToEdit" value="{!manageOppList}" var="manageOpp2" rows="1" styleClass="noDot"> 
                <apex:pageBlockSection title="Details" columns="2" >
                      <apex:inputField id="_stage" required="false" onchange="rippleDown(this);" value="{!manageOpp2.opp2.StageName}"  styleClass="exampleDataToSetVariable"/>
                      <apex:inputField id="_reasonForClosure" required="false" onchange="rippleDown(this);" value="{!manageOpp2.opp2.Reason_for_Closure__c}"  styleClass="exampleDataToSetVariable"/>
                    

These displays all member opp

<apex:repeat value="{!manageOppList}" var="manageOpp">
<tr>
<td class="sticky-col first-col ">
     <div class="center-bottom">
        <apex:inputCheckbox id="selectCheckbox" value="{!manageOpp.isSelected}"/>
     </div>
</td>
<td class="sticky-col second-col">
<apex:outputLink value="{!manageOpp.opp.Id}">{!manageOpp.opp.Name}</apex:outputLink>
</td>
<td>
<apex:inputField id="closeDate" value="{!manageOpp.opp.CloseDate}" onchange="fieldChanged();" />
</td>
<td>
<apex:inputField id="_stage" value="{!manageOpp.opp.StageName}" />
</td>
<td>
<apex:inputField id="_reasonForClosure" value="{!manageOpp.opp.Reason_for_Closure__c}"/>
</td>

These script is responsible for rippling down or applying all the changes to the member opp

function rippleDown(inputElement) {
        // Get the last 4 digits from ID
        var inputId = inputElement.id;
        var last4Digits = inputId.slice(-4);
        
        // Get only the input checkboxes in the first column
        var checkboxes = document.querySelectorAll('td:first-child input[type=checkbox]');
        
        // Iterate through checkboxes array to check if checkboxes are checked
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                // Get the row where the checked checkbox is located
                var row = checkboxes[i].closest('tr');
                
                // Get all the input, select, and checkbox elements from the row with an ID ending with last 4 digits
                var rowInputsAndSelects = row.querySelectorAll('input[id$="' + last4Digits + '"], select[id$="' + last4Digits + '"], input[type=checkbox][id$="' + last4Digits + '"]');
                
                // Iterate through the array and assign the value or check the checkbox
                for (let j = 0; j < rowInputsAndSelects.length; j++) {
                    if (rowInputsAndSelects[j].type === 'checkbox') {
                        // Check/uncheck the checkbox element based on the input state
                        rowInputsAndSelects[j].checked = inputElement.checked;
                    } else {
                        // Set the value of input and select elements
                        rowInputsAndSelects[j].value = inputElement.value;
                    }
                }
            }
        }
    }

If you change the value of the Stage at the bottom, the dependent field is enabled and user can change it.
changing at the bottom

Is there any thing that I can do with javascript that can mimic a user clicking a field? onchange doesnt’ work and adding event listener or maybe I’ve just done it incorrectly, I’m quite a beginner with javascript.

Any suggestion or if you can point me to the right direction is surely appreciated. Thank you