jQuery AJAX display issue

[Joe San]

Guys,

I have the following jsp page:

<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common/jquery-1.5.1.min.js"></script>
<script>
	$(document).ready(function() {
		$('form').submit(function() {
		    var target = $('#action').val();
		    $.ajax({
				traditional: true,
				type: $(this).attr('method'),
				url: $(this).attr('action'),
				data: $(this).serialize(),
				success: function(response) {
				    var div = $('#questionAndAnswerDisplayDiv');
				    div.fadeOut('500').html(response).fadeIn('500');
				}
		    });
			return false;
		});
		// Mouseover effect for buttons acting link links
		$(".hyperlinkButton").mouseover(function() {
			$(this).css('cursor','pointer');
			$(this).removeClass().addClass("hyperlinkButtonMouseOver");
			}).mouseout(function() {
			$(this).css('cursor','pointer');
			$(this).removeClass().addClass("hyperlinkButton");		
		});
	});
</script>
<div id="goBackDiv">
	<a href="<%=request.getContextPath()%>/content/exams.action" id="goBack"> Cancel exam and take me back home </a>
</div>
<br>
<div id="questionAndAnswerDisplayDiv">

	<div id="questionDiv">
		<s:property value="#session.examObject.currentQuestion.questionText"/>			
	</div>
	<div id="answerDiv">
			This is the answer...
	</div>
	<div id="nextButtonDiv">
	  <s:form action="takeExam" namespace="/content" cssClass="inlineForm">
		<s:submit type="button" cssClass="hyperlinkButton" value="Next"/>
	  </s:form>
        </div>	
</div>

I submit the form to the same jsp page when the next button is clicked. When I land up in this page for the first time, the goBackDiv and the nextButtonDiv is displayed correctly. But when I click the next button, I see the goBackDiv and the nextButtonDiv appear twice (one the already existing ones) and the second one to my confusion, gets shown up inside the questionAndAnswerDisplayDiv div? Below is what the rendered HTML looks like:

<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

	<div id="goBackDiv">
		<a id="goBack"  rel="nofollow"> Cancel exam and take me back home </a>
	</div>
	<br>
	<div id="questionAndAnswerDisplayDiv" style="display: block;">
		<div id="goBackDiv">
			<a id="goBack"  rel="nofollow"> Cancel exam and take me back home </a>
		</div>
		<br>
		<div id="questionAndAnswerDisplayDiv">
			<div id="questionDiv">
				This is the second question... wow it worked...			
			</div>
			<div id="answerDiv">
					This is the answer...
			</div>
			<div id="nextButtonDiv">
				<form class="inlineForm" method="post" action="/Quintilis31Web/content/takeExam.action" name="takeExam" id="takeExam">
					<table class="inlineForm">
 					<tbody><tr><td ><div align="right">
 				    		<button class="hyperlinkButton" value="Next" id="takeExam_0" type="submit" style="cursor: pointer;">
 							Next
 							</button>
 						</div></td></tr>
 					</tbody>
 					</table>
				</form>
			</div>	
		</div>
	</div>
</div>