I have a vf page that creates multiple records on an object.

The page has rows with text and date fields in for each record to be created.

I want to update a hidden inpuit field on each row but cannot figure out how to do this for multiple rows.

The page works well at the moment for inserting multiple records but only the first record gets the hidden field updated.

I'm using JS with [data-html-fields] to set the value of the hidden field.

Can anyone suggest the correct way to do this?
 

<script type="text/javascript">
    
    function updateHidden() {
        var sellist = document.querySelectorAll("[data-sellist]"),
            inpfield = document.querySelectorAll("[data-inpfield]"),
            inpnew = document.querySelectorAll("[data-inpnew]");
			
        for (var i = 0; i < {!rowNum}; i++)
          {
          inpnew[i].value = sellist[i].value + ' - ' + inpfield[i].value;
          }
      }

</script>
    
    <apex:form >
        <apex:variable var="rowNum" value="{!0}"/>
        <apex:pageBlock >            
            <apex:sectionHeader subtitle="Add Event Delegates"/>
            <apex:variable var="rowNum" value="{!0}"/>
            <apex:pageBlockTable value="{!DelegateList}" var="del" style="width:100%">
                <apex:facet name="footer">
                    <apex:commandLink value="Add" action="{!insertDelRow}"/>
                </apex:facet>
                <apex:column headerValue="Name" style="width:10%">
                    <apex:inputField style="width:98%" value="{!del.Name__c}" id="inpfield" required="true" html-data-inpfield="1" onKeyUp="updatehidden()"/>
                </apex:column>
                <apex:column headerValue="Phone" style="width:10%">
                    <apex:inputField style="width:98%" value="{!del.Phone__c}" id="phone"/>
                </apex:column>  
                <apex:column headerValue="Email" style="width:12%">
                    <apex:inputField style="width:98%" value="{!del.Email_Address__c}" id="email" required="true"/>
                </apex:column>
                <apex:column headerValue="Job Role" style="width:10%">
                    <apex:inputField style="width:98%" value="{!del.Job_Role__c}" id="jobrole"/>
                </apex:column>
                <apex:column headerValue="Company Name" style="width:12%">
                    <apex:inputField style="width:85%" value="{!del.Company_Name__c}" id="companyname" required="true"/>
                </apex:column>
                <apex:column headerValue="Event Type" style="width:11%">
                <apex:actionRegion >
                <apex:selectList style="width:98%" value="{!selectedType}" multiselect="false" html-data-sellist="1" size="1" id="sellist" onchange="updateHidden()">
                <apex:selectOption itemValue="TechTalk" itemLabel="Tech-Talk"/>
                <apex:selectOption itemValue="Scotland Roadshow" itemLabel="Scotland Roadshow"/>
                <apex:selectOption itemValue="NICEIC/ELECSA Live" itemLabel="NICEIC/ELECSA Live"/>
                <apex:actionSupport event="onchange" reRender="venue"/>
                </apex:selectList>
                </apex:actionRegion>
                </apex:column>
                <apex:column headerValue="Venue" style="width:20%">
                    <apex:selectList value="{!del.Venue__c}" style="width:98%" size="1" id="venue">
                        <apex:selectOptions value="{!venues}"/>
                    </apex:selectList>
                </apex:column>
                <apex:column headerValue="Date" style="width:8%">
                    <apex:inputField value="{!del.Event_Date__c}" style="width:98%" required="true" html-data-datefield="1"/>
                </apex:column>
                <apex:column headerValue="FOC?">
                    <apex:inputcheckbox value="{!del.FOC__c}" id="foc"/>
                </apex:column>
                <apex:column headerValue="Delete" style="width:3%">
                    <apex:commandLink style="font-size:15px; font-weight:bold; padding-left:30%; color:red;" value="X" action="{!delDelRow}" immediate="true">
                        <apex:param value="{!rowNum}" name="index"/>
                    </apex:commandLink>
                    <apex:variable var="rowNum" value="{!rowNum+1}"/>
                    <apex:inputHidden value="{!del.Name}" html-data-inpnew="1" id="inpnew"/>
                </apex:column>
            </apex:pageBlockTable>
            <br/>
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Save" action="{!insertDelegates}"/>
                <apex:commandButton value="Back" action="{!cancelDelegates}" immediate="true"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>