Add one or two more PHP variables to the javascript code

Question

I am a decent PHP programer and recently I got stuck in a javascript code.

I have the code below:

$(function () {

    $('.more').live("click", function () {
        var ID = $(this).attr("id");

        if (ID) {
            $("#more" + ID).html('<img src="moreajax.gif" />');
            $.ajax({
                type: "POST",
                url: "scripts/loadmore.php",
                data: "lastmsg=" + ID,
                cache: false,
                success: function (html) {
                    $("div#updates").append(html);
                    $("#more" + ID).remove();
                }
            });
        } else {
            $(".morebox").html('The End');

        }

        return false;
    });
});

This code submit without problems one PHP variable to the process page loadmore.php using this input

<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
    <a href="#" class="more" id="<?php echo $load_id; ?>">
        load more
    </a>
</div>

How can put more variables in the input and the javascript code to work with them on the process page?

I want to set one or two more variables.

UPDATE:

I updated the code like this:

HTML input:

<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
<a href="#" class="more" data-id="<?php echo $load_id; ?>" data-act="<?php echo $act; ?>">load more</a></div>

JAVASCRIPT CODE:

<script type="text/javascript">
$(function() {

$('.more').live("click",function() 
{
var ID     = $(this).attr("data-id");
var ACT = $(this).attr("data-act");

if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: {"lastmsg="+ ID, "act="+ ACT},
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}

return false;

});
});

</script>

I am not sure if the data lines was writed properly because the script looks like it's frozen now

SOLVED:

I just used a datastring like this

<script type="text/javascript">
$(function() {

$('.more').live("click",function() 
{
var ID     = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
var dataString = 'lastmsg='+ ID + '&act=' + ACT;

if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: dataString,
//data: {"lastmsg="+ ID, "act="+ ACT },
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}

return false;

});
});

</script>

Answer 1

Just send data as an object:

data: {
  "lastmsg": "lastmsg="+ ID,
  "anotherData": "someData"
}

You'll retrieve them in your PHP script as follows:

$_POST["lastmsg"];
$_POST["anotherData"];