New Post: Calling GetListItems then UpdateListItems from hyperlink

I am creating a dashboard to manage announcements and banners for the front page of a portal. I have no issue getting the list items I want to display in the queue list. I am rendering the list output into a table with an "Approve" hyperlink in the last column. I want to be able to click the hyperlink and use the ID variable from the getlistitems call to updatelistitems. I have tried nesting the updatelistitems in the getlistitems function but I can't get the syntax correct.

I would like to use the ID then call updatelistitems with the update batchcmd using valuepair notation: [["ApprovalStatus", "Approved"]] to toggle the ApprovalStatus field from Pending to Approved.

Here is the getlistitems call my page is using which works to get the data into the queue table:

$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Created' /><FieldRef Name='Author' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='PromoteToBanner' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /><FieldRef Name='Modified' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='ApprovalStatus' /><FieldRef Name='ID' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Pending</Value></Eq></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var created = $(this).attr("ows_Created");
        var createdby = $(this).attr("ows_Author").split(";#");
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var promote = $(this).attr("ows_PromoteToBanner");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var appstatus = $(this).attr("ows_ApprovalStatus");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var body = $(this).attr("ows_Body");
        var itemid = $(this).attr("ows_ID");
        
        var announcesubqueuerow = "<tr><td>"+created+"</td><td>"+createdby[1]+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+promote+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td><td>"+appstatus+"</td><td><a href='#' id='approvaltoggle'>Approve</a></td></tr>";

        $("#queuecontainer table tbody").append(announcesubqueuerow);
    
      });
    }
    
  });

This is the whole script for the page which includes my unsuccessful effort to incorporate the updatelistitems for the hyperlink into the first getlistitems call for the queue table:

<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Created' /><FieldRef Name='Author' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='PromoteToBanner' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /><FieldRef Name='Modified' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='ApprovalStatus' /><FieldRef Name='ID' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Pending</Value></Eq></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var created = $(this).attr("ows_Created");
        var createdby = $(this).attr("ows_Author").split(";#");
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var promote = $(this).attr("ows_PromoteToBanner");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var appstatus = $(this).attr("ows_ApprovalStatus");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var body = $(this).attr("ows_Body");
        var itemid = $(this).attr("ows_ID");
        
        var announcesubqueuerow = "<tr><td>"+created+"</td><td>"+createdby[1]+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+promote+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td><td>"+appstatus+"</td><td><a href='#approve' id='approvaltoggle'>Approve</a></td></tr>";
        
                $("#approvaltoggle").on("click", function (itemid) {
                    $().SPServices({
                    operation: "UpdateListItems",
                    async: false,
                    batchCmd: "Update",
                    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
                    valuepairs: [["ApprovalStatus", "Approved"]],
                    ID: itemid,
                    completefunc: function(xData, Status) {
                        alert("Announcement Approved");
                    }
                });
                }
        $("#queuecontainer table tbody").append(announcesubqueuerow);
    
      });
    }
    
  });
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='Modified' />FieldRef Name='ApprovalStatus' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Approved</Value></Eq></Where></Query>",        
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        
        var announceapprovedrow = "<tr><td>"+lastmodified+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td></tr>";

        $("#approvedcontainer table tbody").append(announceapprovedrow);
    
      });
    }
  });
$().SPServices({
    operation: "GetListItems",
    async: false,
    listUrl: "/Employee/Employees/Lists/Approved%20Announcements/",
    listName: "{ABE655C8-0B43-4421-B555-4B1748D9D1A3}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Modified' /><FieldRef Name='AnnouncementType' /><FieldRef Name='Title' /><FieldRef Name='AnnouncementImage' /><FieldRef Name='PublishDate' /><FieldRef Name='Expires' /><FieldRef Name='UseBanner' /><FieldRef Name='BannerCaption' /></ViewFields>",
    CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ApprovalStatus' /><Value Type='Choice'>Approved</Value></Eq><Eq><FieldRef Name='PromoteToBanner' /><Value Type='Choice'>Yes</Value></Eq></And></Where></Query>",     
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var lastmodified = $(this).attr("ows_Modified");
        var type = $(this).attr("ows_AnnouncementType");
        var title = $(this).attr("ows_Title");
        var pubdate = $(this).attr("ows_PublishDate").split(" ");
        var expdate = $(this).attr("ows_Expires").split(" ");
        var usebanner = $(this).attr("ows_UseBanner");
        var bannercap = $(this).attr("ows_BannerCaption");
        var image = $(this).attr("ows_AnnouncementImage").split(",");
        var announcebannerrow = "<tr><td>"+lastmodified+"</td><td>"+type+"</td><td>"+title+"</td><td>"+pubdate[0]+"</td><td>"+expdate[0]+"</td><td>"+usebanner+"</td><td>"+bannercap+"</td></tr>";
    var bannerdata = "<li><a href='#'><img src=\"" + image[0] + "\"/>"+"</a><p class='flex-caption'>" + bannercap + "</p></li>";
        $("#approvedbannercontainer table tbody").append(announcebannerrow);


    $(".flexslider .slides").append(bannerdata);
      });
    }
  });
$("#main-menu").smartmenus();
$('.footable').footable();
$(".flexslider").flexslider();
});
</script>

I have tried several different nested configurations and tried with the javascript function called from the hyperlink itself < href="#" onclick="function(params);">Approve</a>. All to no avail.

Please help me understand what I am doing incorrectly.

Thanks,
Dan