Clash Royale CLAN TAG

Use jQuery to append response to individual HTML elements without duplication

I am trying to store the result of each form submission into its own individual HTML element. My code is doing this but it's also duplicating the results. Is there a way to append the result just the once rather than to all matching classes without creating uniquely identifiable elements (e.g. card1, card2, card3).

<form id='userForm' method="POST">
<input class="textbox" type='text' name='query' placeholder='Question' value="" />

<input type='submit' value='Submit' />
</form>

<div class="responses"></div>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
var question = $(".textbox").val();
$.ajax({
type: 'POST',
url: '/dev/post.php',
data: $(this).serialize()
})
.done(function(data){
$( "<div class='response'><div class='question'></div><div class='answer'></div></div>").appendTo( ".responses" );
$('.question').append(question);
$('.answer').append(data);
})
.fail(function() {
alert( "Whoops, there's been a problem with getting the answer." );
});

return false;
});
});
</script>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.