The reason is that if you are on page 1, the data that is posted to be saved is an array of the form:
XX_theme_settings=array('XX_Option1' =>'input1','XX_Option2'=>'input2',...)
and contains no data from page 2.
This is because the input from page 2 is not posted with it (since it wasn’t in the same <form> – it’s not on the page). Thus when the XX_theme_settings array is saved to the database it does not contain any data from page 2.
Likewise, saving on page 2 means no data from page 1 is in the array, and since this array replaces complete the array in the database (i.e. they are not merged), you loose all data from page 1.
Note: only one ‘form’ is ever sent, (and so recieved) – so you should ensure you have all your sections within one form. (They can appear to be different forms, and have a submit button after each section – but each submit button will save all the settings).
Putting the fields inside one <form> will solve the issue. If you insist on having them in separate pages, one simple solution to this would be to have a different record in the database for each page.
Alternatively, in your validation callback of the XX_theme_settings array, you could merge that array with the existing array in the database, so that any ‘missing’ data is added with it’s current value in the database. (See array_merge)
Note: if a checkbox is unchecked, it does not send anything, and so will be considered ‘missing’. This makes the second option a bit tricky (i.e. is the data missing because it wasn’t posted (wrong page) or because its a checkbox and wasn’t checked). To get round this you would need to determine which page’s data has been sent, and if data from a checkbox onthat page is missing set its value to 0 prior to merging. You could do this by having separate validation callbacks for each page (there could be another/better way).
As @ChipBennett states in the comments, determining the page could be achieved by giving the submit button a name which indicates the page.