javascript – Pull a name from a SP 2013 list using Javscript and place it in HTML page based on another column in the list


I just need to take all “Full Name” items and place them in an html page. If the person is a part of a Branch, they will have their name appended to that box on the html page using an ID. If they are not a part of a branch, then their name will go in the division boxes in the html page.
Here is the List:
enter image description here

I tried CAMLquery below but failed:

$(document).ready(function() {




/*== Pull all Names & append into Bootstrap container ==*/
var camlQuery = "<Query><Where><And><Contains><FieldRef Name='Branch'/><Value Type='Choice'>Headquarters Support</Value></Contains><Eq><FieldRef Name='Director'/><Value Type='Boolean'>0</Value></Eq></And></Where></Query>";
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: 'Org%20Chart',
    CAMLQuery: camlQuery,
    CAMLViewFields: "<ViewFields><FieldRef Name='ID' /><FieldRef Name='FullName' /><FieldRef Name='Division' /><FieldRef Name='Branch' /><FieldRef Name='Director'/></ViewFields>", //CAMLViewFields must be referenced to pull list data below
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {          
        
        
        var fullName = $(this).attr("ows_FullName"); var division = $(this).attr("ows_Division"); var branch = $(this).attr("ows_Branch");var director = $(this).attr("ows_Director");
                                            
        /* Load data into HTML container */                             
        var nameHTML = '<span>' + fullName + '</span>';
        
        /* Write data into specified container */
        $("#HSMEAD").append(nameHTML);
        
      });
      
    }
});




 }); //end doc.ready()// JavaScript Document

it does not render in <div id="HSMEAD"></div> on my HTML page