Show/Hide button based on User Email. Error: Unexpected identifier

Question

I have a JavaScript which I use to hide or show a button based on the logged in user.

Button:

<a id="customAddNew" href="/ibs/_layouts/listform.aspx?PageType=8&amp;ListId={CED7A37E-B1B4-46DD-B5C6-9232195D7E16}&amp;RootFolder=" target="_self" style="display: none;">Submit Work Order​</a>

Script:

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("initiate");

function initiate(){
    var email = $().SPServices.SPGetCurrentUser({
        fieldName: "EMail",
        debug: false
        });

    var trimmedEmail = email.split("@");    
    var newButton = document.getElementById("customAddNew");

    if (trimmedEmail[1] == "napacanada.com"){
        //Is NAPA User, which can't Add New Items
        alert("napa user");
        //newButton.style.display = "none";
        $("[id$=customAddNew]").setAttr("display","none");
    }else{
        //Is City User, can Add New Items
        alert("none napa user"
        //newButton.style.dispaly = "block";    
        $("[id$=customAddNew]").setAttr("display","block");
    }
}
</script>

I've placed the script in a CEWP and linked to the js file.

Answer 1

There looks to be a typo here, alert("none napa user", no closing bracket.

Selectors can just be $("#customAddNew")

Since the link is hidden by default, you can bypass the code in the if block.

The else block I'd do $("#customAddNew").show(); or $("#customAddNew").toggle(); or $("#customAddNew").css("display", "block");