Reloading DIVs with updated database data

Reloading DIVs with updated database data

I just started learning JQuery/AJAX today, so sorry if this is a very stupid/obvious question. Basically, I have two DIVs that display some data stored in a MySQL database. One DIV shows some items, and clicking on one changes that item's status to "active" in the database. The other DIV displays the current "active" item. Here's how I've tried to set it up:

This is how each of the items are displayed in the first DIV (id #itempanel):
  1. <img src="'.$row['item'].'.gif" alt="" onclick="update('.$row['id'].')">

The active item is displayed in a DIV with id #activepanel

And then I have this:

  1. jQuery(document).ajaxStart(function(){
        $("#loading").show();
    })

    jQuery(document).ajaxStop(function(){
        $("#loading").hide();
    })

    function update (ITEM) {

        $.post("actions/updateparty.php", { pokemon: ITEM} );
       
        $("#activepanel").load(location.href+" #activepanel>*");
        $("#itempanel").load(location.href+" #itempanel>*");

    }
















edit - I fixed my first problem, but now when I click on one of the items in #itempanel, it only re-loads one of the DIVs instead of both. I have to manually refresh the page for the other DIV to update.