My VF page has a repeatable section and within each block there are 3 different updateable fields and an update button. I have some Javascript at the top of the page which is run when the update button in the section is clicked. This button sends the Id of the SF record to update, but I'm struggling with getting the values for the other fields. The function calls a remote function in my Apex class which does the actual updating.

This is my Javascript:

jCC$(document).ready(function() {

            jCC$(".newDateTime").click(function() {

                var ccid = this.id;
                
                var newdate = document.getElementsByClassName('theApxDate')[0].value;
                var newtime = document.getElementsByClassName('theTimes')[0].value;
                var ccat = document.getElementsByClassName('theCat')[0].value;

                if(newdate != '' && newtime != ''){
                    CallCycleController.RemoteNewEventDate(ccid, newdate, newtime, ccat, function(result, event){
                        var foo = result;
                        alert('CallCycle has been updated');
                });
                }
                else { alert('CallCycle NOT updated: Please enter a Date AND Time');
                }
                return false;
            });
});

And this is my VF page section:

<apex:pageBlock title="Call Cycle Events">

	<apex:repeat value="{!CallCycleActivitiesEx}" var="activity">

		<apex:pageBlock title="{!activity.CallCycleActivity.Account__r.Name + ' (' + activity.CallCycleActivity.Account__r.AccredoID__c + ')'}">
			<apex:pageBlockSection >
				<apex:inputField label="Appointment Date" id="theApDate" styleClass="theApxDate cc_margin" value="{!activity.CallCycleActivity.EventDate__c}"/>
				<apex:selectList label="Category" id="eventCategory" multiselect="false" size="1" value="{!activity.Memo}" styleClass="theCat cc_margin" >
					<apex:selectOptions value="{!EventCategories}"/>
				</apex:selectList>
				<apex:selectList id="theTime" multiselect="false" size="1" value="{!activity.CallCycleActivity.EventTime__c}" styleClass="theTimes cc_margin">
					<apex:selectOptions value="{!TimeBlocks}"/>
				</apex:selectList>
				<button class="newDateTime cc_margin" id="{!activity.CallCycleActivity.Id}">Update Call Cycle Event</button>
				<button class="remCCA cc_margin" id="{!activity.CallCycleActivity.Id}">Remove Call Cycle Event</button>
			</apex:pageBlockSection>
			<apex:pageblockTable styleClass="cc_row" width="95%" rowClasses="odd,even" value="{!activity.CallCycleActivity.CallCycleActivityContacts__r}" var="contact">
				<apex:column styleclass="cc_col10" headerValue="Phone Number" value="{!contact.Contact__r.Phone}"/>
				<apex:column styleclass="cc_col10" headerValue="Mobile Phone" value="{!contact.Contact__r.MobilePhone}"/>
				<apex:column styleclass="cc_col10" headerValue="Department" value="{!contact.Contact__r.Department}"/>
				
			</apex:pageblockTable>

		</apex:pageBlock>

	</apex:repeat>

</apex:pageBlock>

As it is now, if there are 3 repeating blocks on the VF page and I update the 3rd one, it picks up the correct Id as that is passed via the button, but it picks up the values from the 1st block for the fields. 

How do I code it to pick up the values from 'this' block?