ReferenceError in javascript. Character undefined in append function

Question

Adding tags using append function from jquery.

Here is the jquery code where it's blocking

tabSections(data).forEach(function(section){
    $("#sections nav ul").append("<li id='section_"+section+"' class='list_section' onClick='addText("+section+")'>" + section + "</li>");
});

And the HTML code from the browser

<li onclick="addText(287585-C)" class="list_section" id="section_287585-C">287585-C</li>

When I click on a li tag, it calls the function addText(section){} that is defined. The Reference Error I'm getting is that it doesn't recognize what I'm passing to my function as a complete string but as 2 numbers (a subtraction). Which is why an error stating that C is not defined is raised.

I'm trying to get a html code that should look like this

<li onclick="addText('287585-C')" class="list_section" id="section_287585-C">287585-C</li>

How can I modify my javascript code so that I have the 2 quotation mark that appear in the HTML code (and/or that the javascript interprets the argument as a string and not 2 numbers) ? The error is raised once I click on a tag

The toString() function didn't do anything either.

Thanks in advance

Answer 1

tabSections(data).forEach(function(section){
    $("#sections nav ul").append('<li id="section_'+section+'" class="list_section" onClick="addText(\''+section+'\')">' + section + '</li>');
});

Didnt run it...but try it