How can I refresh the append data without page refresh jquery?

Question

I am trying to use ++ in jquery to append data, and I face a problem, I need to refresh the value again if I click other button without refresh page, how can I do that? The var count will increase as I clicked, I want to know if I can start over this count again when I click second button.

 var count='1'; $('#good').on('click',function(){ $.ajax({ url: MyAjaxSearch.ajaxurl, type:'POST', cache: false, data:data, success: function(data){ count++ } }); }): $('#second').on('click',function(){ //refresh the var count, start from 1 again count++ }); 

Answer 1

Updated Answer (based on clarification from OP) :

I want to if I can start over this count again when I click second button

$('#second').on('click',function(){
    //refresh the var count, start from 1 again
    count = 1;
});

Live Example:

 var count = 1; $('#good').on('click', function() { count++; snippet.log("Incremented, count = " + count); }); $('#second').on('click', function() { //refresh the var count, start from 1 again count = 1; snippet.log("Reset, count = " + count); }); 

 <input type="button" id="good" value="Increment"> <input type="button" id="second" value="Reset"> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Or if you wanted the first incremented number to be 1, start with count = 0 :

Live Example:

 var count = 0; $('#good').on('click', function() { count++; snippet.log("Incremented, count = " + count); }); $('#second').on('click', function() { //refresh the var count, start from 0 again count = 0; snippet.log("Reset, count = " + count); }); 

 <input type="button" id="good" value="Increment"> <input type="button" id="second" value="Reset"> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

Original Answer :

I'm going to take a total guess at it here and say that in your ajax callback, you're modifying the page in some way, for instance:

$('#good').on('click', function() {
    $.ajax({
        url: MyAjaxSearch.ajaxurl,
        type: 'POST',
        cache: false,
        data: data,
        success: function(data) {
            $("selector-for-some-elements").html("new content"); // <===
            current_page++
        }
    });
});

And that you want a click on the other element to reset things back to the way they were when the page was first loaded.

If so , then you can do something like this (see comments):

var current_page = '1';
// *** A variable for remembering the original content
var originalContent;

$('#good').on('click', function() {
    $.ajax({
        url: MyAjaxSearch.ajaxurl,
        type: 'POST',
        cache: false,
        data: data,
        success: function(data) {
            // Grab the elements we're going to change
            var elementsToChange = $("selector-for-elements");

            // If we don't have saved content...
            if (!originalContent) {
                // Save the original content
                originalContent = elementsToChange.clone();
            }

            // Modify it
            elementsToChange.html(/*....*/);

            current_page++
        }
    });
});

$('#second').on('click', function() {
    // If we have original content...
    if (originalContent) {
        // Put it back
        $("selector-for-some-elements").replaceWith(originalContent);
        current_page = 1;
    }
});

Obviously, many aspects of the above would vary based on what you're actually trying to do, but as you haven't told us what that is, this is the best I can do...