function addElement() {
  var container = document.getElementById('hospital_container');
  var number_of_rows = document.getElementById('number_of_rows');
  var num = (document.getElementById('number_of_rows').value -1)+ 2;
  number_of_rows.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'hospital_table_'+num;
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = '<table><tbody>\n\
		<tr>\n\
			<td width="15%"><label for="year">Year:</label></td>\n\
			<td width="35%"><input type="text" name="form_page_3[year_' + num + ']" id = "year_' + num + '" size = "4" maxlength = "4" /></td>\n\
			<td rowspan="2">\n\
			<label for="reason">Reason:</label>\n\
			<br><textarea name="form_page_3[reason_' + num + ']" id="reason_' + num + '" cols="27" rows="2" /></textarea>\n\
			</td>\n\
		</tr>\n\
		<tr>\n\
			<td><label for="hospital">Hospital:</label></td>\n\
			<td><input type="text" name="form_page_3[hospital_' + num + ']" id="hospital_' + num + '" size = "16" />\n\
			</td>\n\
		</tr>\n\
		<tr class="border">\n\
			<td><label for="doctor">Doctor:</label></td>\n\
			<td><input name="form_page_3[doctor_' + num + ']" type="text" id="doctor_' + num + '" size="16" />\n\
			</td>\n\
			<td>\n\
				<a href="javascript://" onclick="addElement();"><img src="../images/icons/add.gif" alt="Add A Surgery/Hospitalization" width="16" height="16" border="0" align="top"> Add A Surgery / Hospitalization</a>\n\
					<div class="delete"><a href="javascript://" onclick="removeElement(\'hospital_table_' + num + '\')"><img src="../images/icons/delete.gif" alt="Delete This Surgery/Hospitalization" width="16" height="16" border="0" align="top" /> Delete This Surgery / Hospitalization</a></div>\n\
			<input type="hidden" name="form_page_3[hospital_ids][]" value="'+num+'" />\n\
			</td>\n\
		</tr></tbody></table>';
  container.appendChild(newdiv);
}

function removeElement(divNum) {
  var d = document.getElementById('hospital_container');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}