AJAX form submit only works on first submit

Question

SCRIPT.JS

$(document).ready(function(){
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'data/addtext.php',
            dataType: 'HTML',
            success: function (result) {
                $('#meo').html(result);
            }
        });
    });
});

INDEX.PHP

<div id="meo"></div>

ADDTEXT.PHP

<?php echo "HELLO WORLD" ?>

So above is my codes. What I want to happen is every time I submit the form, the word "HELLO WORLD" will be printed out, this code is working on the first click submit the output will be

HELLO WORLD

Now, I want to print it out again so I will click the submit button again, but at the second submit, nothing is printing out. why?

The output I want is

HELLO WORLD HELLO WORLD

In other words, I want to print out the "HELLO WORLD" on every submit but the old output will be remain. So If I submit the form 3 times then the output should be

HELLO WORLD HELLO WORLD HELLO WORLD

I know I can do this using append and without using form, But I want to do it using form ajax without page reloading. Again this code is working but only on the first click submit.

Why is it not working on the second click submit?

Answer 1

You are not appending the result to #meo you are completely replacing it each time.

Instead of

$('#meo').html(result);

Try appending result to the existing values/html in #meo. Like:

$('#meo').html($('#meo').text() + result);