I am using following JavaScript code inside a page. The problem is that the code gets executed for the first time and fetches data from from elements.

During the subsequent calls, the changed data in the form elements is not available to this function as it uses data from its maiden call.

```
$(document).ready(function() {
$('<textarea id="message-clone"></textarea>').insertAfter("#form-message-compose");
var saveDraft = function () {
    var originalStriped = $("#wysiwyg").val().replace(/(<([^>]+)>)/ig,"");
    if((originalStriped.length) > 10) {
        var input = $("<input>").attr("type", "hidden").attr("id", "savedraft")
                    .attr("name", "submit").val("savedraft");
        $.ajax({ 
            type: "POST",                                            
            url: $("#form-message-compose").attr("action"),
            data: $("#form-message-compose").append(input).serialize(),
            success: function(result){
                var result = JSON.parse(result);
                $("#subject").val(result.message_subject);
                $('input[name="draft"]').val(1);
                $("#id").val(result.message_id);
                var flash = '<div id="flash" class="alert alert-success"><a data-dismiss="alert" class="close">×</a><strong>Yay!</strong> Message Auto saved to drafts!</div>';
                $("#page-title").append(flash);
                $("#flash").fadeOut(3000, function() { $(this).remove(); });                            
                $("#savedraft").remove();
                $("#message-clone").val($("#wysiwyg").val().replace(/(<([^>]+)>)/ig,""));
            }
       });
    }
}
setInterval(saveDraft(), 2000);
});

```

The problem here is that for the first time, the function fetches correct data from input element `#wysiwyg` but during the subsequent, it doesnot update the data from the call `$('#wysiwyg').val()` which results in single execution of the code inside `if` block.

Kindly guide, where I am doing wrong.