Escaping quotes in Javascript

I’m building a list of keywords as buttons.

I want my list to look like this:

<a href='Javascript:false' onclick='filterOnKeyword("Alice")'>Alice</a></span>
<a href='Javascript:false' onclick='filterOnKeyword("Bob")'>Bob</a></span>
etc.

And I’m building it out like this:

function buildKeywordList(keywordArray){
    $.each(keywordArray, function(i,val){
    $(".keyword-list").append("<a href='Javascript:false' onclick='filterkeyword('" + val + "')'>" + val + "</a></span>");
    });
}

But this is what is being rendered:

<a href="Javascript:false" onclick="filterkeyword(" structure')'>structure</a>

Seems to be messing up the order of the quotes.

I tried pulling the string out into a variable, like this:

    var str = "filterkeyword('" + val + "')";
    $(".keyword-list").append("<a href='Javascript:false' onclick='" + str + "'>" + val + "</a></span>");

but it changed nothing.

It’s been decades since I had to write code with escaped quotes. Obviously I’ve forgotten how to do it.

I’d also accept alternate ways of doing this (i.e. ones from the 21st century).