Sharepoint Webpart with html Table using SPSERVICES

Attached image has my share point list data and the out put which i want to achieve. Can you please help me to create the structure which in the Image Dynamically Also Next time when i try to add a new item it should come under the same category. Can you please help me to Genrate the HTML table or by using DIV & LI tags and assign the same Dynamically.

Here is my script where i am using SPservices to fetch the data

<script type="text/javascript" src="../SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices.min.js"></script>
<script type="text/javascript">
//this is where the script starts after the page is loaded
$(document).ready(function() { 

    GetStates();

});
function GetStates()
{
        //The Web Service method we are calling, to read list items we use 'GetListItems'
        var method = "GetListItems";

        //The display name of the list we are reading data from
        var list = "States";      
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='CountryLookup' />" +
                                "<FieldRef Name='State' />" +
                            "</ViewFields>";

        var query = "<Query>" +
                        "<Where>" +
                            "<Neq>" +
                                "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                            "</Neq>" +
                        "</Where>" +
                        "<OrderBy>" + 
                            "<FieldRef Name='Title'/>" +
                        "</OrderBy>" +
                    "</Query>";

        //Here is our SPServices Call where we pass in the variables that we set above
        $().SPServices({
                operation: method,
                async: false,  //if you set this to true, you may get faster performance, but your order may not be accurate.
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                      //this basically means "do the following code when the call is complete"
                    completefunc: function (xData, Status) { 
                        //this code iterates through every row of data returned from the web service call
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 


                            //get the title field (States's Name)
                            var name = ($(this).attr("ows_Title"));
                            var CountryLookup=($(this).attr("ows_CountryLookup"));
                            var State=($(this).attr("ows_State"));

                            //call a function to add the data from the row to a table on the screen
                            AddRowToTable(name,CountryLookup,State);

                        });                
                    }
        });

}

// 
function AddRowToTable(name,CountryLookup,State)
{
    //HTML TABLE STRUCTURE

}

</script>

<!-- table where our statesTable rows will go -->
<table id="statesTable"></table>