I see in your posted HTML you have four instances of "Men's Shirt":
The onclick= handler of the <li> element has [font=monospace]'...Men\'s Shirt ...'[/font]. You need a backslash here because it's in a single-quoted JavaScript string, and you have one.
Inside that <li> element you have an <a> element with an onclick= handler. Here you have [font=monospace]'....Men's Shirt ...'[/font]. You don't have a backslash here, but you need one. As for why you have identical onclick= handlers both for the <li> element and the <a> element within ... you'll have to answer that.
Immediately after those two elements, there is another <li> item, with a title attribute, [font=monospace]"Men\'s Shirt "[/font] This does not need a backslash because it's not in a single quoted string.
And, finally, plain text in an <h4> element reading [font=monospace]Men's Shirt [/font]
Incidentally, note that it's not [font=monospace]"Men's Shirt"[/font] but [font=monospace]"Men's Shirt "[/font]. You've got an extra space somewhere (probably the entry in the db).
Now, in the code you've posted there is absolutely no reason why (1) and (2) should be different - why the first is properly escaped but the second isn't. Nor does your posted code go far enough to show how the other two instances are generated.
Now presumably you use those functions you showed, but they don't appear anywhere in your demonstration code either, so we can't see how they're fitting in.