When Calling a JQuery via ID element, it shows twice

Question

When I am calling a JQuery using the ID element in the Div tag, its showing up twice. Is there something I need to do to stop the double showing? Below is my code and under that is the outcome (using jquery-3.3.1.min.js and jquery.SPServices-2014.02.min.js). Thanks:

    $(document).ready(function() {
    
       $().SPServices({
         operation: "GetGroupCollectionFromUser",
         userLoginName: $().SPServices.SPGetCurrentUser(),
         //async: false,
         completefunc: function(xData, Status) {
          switch (true) {
            case $(xData.responseXML).find("Group[Name='1 Awards Members']").length == 1:
              htmlText="1 Awards Members";
              $('#permText').append(htmlText);
              break;
            case $(xData.responseXML).find("Group[Name='2 Awards Members']").length == 1:
              htmlText="2 Awards Members";
              $('#permText').append(htmlText);
              break;
            case $(xData.responseXML).find("Group[Name='awards Owners']").length == 1:
              htmlText="Awards Owners";
              $('#permText').append(htmlText);
              break;
            default:
              alert("Your account has not been granted permissions.");
          }
    //was here, $('#permText).append("Awards Owners");...still duplicates
          }
       });
    
    });

Answer 1

I Figured it out. Add a web part zone using Designer. Got this from the following:

https://social.msdn.microsoft.com/Forums/en-US/7921de59-0fa1-4fa3-bb16-11d0a64d297f/spservices-and-datatables-loading-twice?forum=sharepointdevelopment