php - Refresh the value of a jQuery variable -

i loading php page ajax call. works great first time, want reload (the user can attempt multiple answers). however, on second load variable theanswer retains value of first attempt.

$('body').on("click", "#answer-submit", function() {     var theanswer = $('#challenge-answer').val();     //alert(theanswer);     $.ajax({         type: "post",         url: "ajax/answer.php",         data: { answer : theanswer },         datatype: "html",         success: function(msg){             if(parseint(msg)!=0) {                 $('#answer').html(msg);             }         }     });  }); 

here html

<div id=question-form>     <input type=text name=answer id=challenge-answer class=clue-input /><br />     <button id=answer-submit>go</button> </div> 

after first attempt #challenge-answer added dom? if so, selector keep grabbing first one. in example added console.log($('[id="challenge-answer"]')); each time after go clicked can see if there more 1 or not.

http://jsfiddle.net/l4h4lll4/4/

html:

<div id="fiddlebody">   <div id=question-form>     <input type=text name=answer id=challenge-answer class=clue-input /><br />     <button id=answer-submit>go</button>   </div> </div> 

js:

$('#fiddlebody').on("click", "#answer-submit", function() {     console.log($('[id="challenge-answer"]'));     var theanswer = $('#challenge-answer').val();     alert(theanswer);     /*     $.ajax({         type: "post",         url: "ajax/answer.php",         data: { answer : theanswer },         datatype: "html",         success: function(msg){             if(parseint(msg)!=0) {                 $('#answer').html(msg);             }         }     });     */ });