stop jquery from replacing text

Don't use .load() .. use jQuery.get() docs for the AJAX part and .append() docs to add them to the element you want (while preserving the existing info)

(also you can indent you code to avoid comment like // DONT DELETE)

var nameid = 1;
$(document).ready(function(){
    $('button').click(function(){
        $.get('mysqlquery.php?id='+nameid, function(data){
            $('#loadbox').append(data);
        });
        nameid++;
    });
});

You may want to look into other jQuery ajax methods besides .load() -- .load() will fill the selected element (the element with an ID of "loadbox" in this case) with the response returned by a request to the provided URL, and it will always overwrite the existing contents.

It sounds like what you want to do is append the response to the element. In that case, you could do:

$.ajax('mysqlquery.php?id=' + nameid, {
  dataType : 'html',
  success : function(html) {
    $('#loadbox').append(html);
  }
});

Do you mean you just want to load once?

var nameid = 1;
$(document).ready(function () {
    var loaded = false;
    $('button').click(function () {
        if (!loaded) {
            $('#loadbox').load('mysqlquery.php?id=' + nameid, function () {
                loaded = true;
            });
        }
    });
});

Update: If you want to append the data by every click, see the @Gaby aka G. Petrioli's answer.