Jquery не распознает селектор, переданный из массива

Question

Я пытаюсь передать имена категорий из массива в селектор jquery и манипулировать css и после выполнения некоторых анимаций.

У меня были проблемы с двойными строками, но я их исправляю, но теперь, где бы я ни былсделать это дает мне ошибку.

Вот ошибка:

Uncaught Error: Syntax error, unrecognized expression: .cat-cloths_&_clothing

Выход массива:

["cloths_&<em>clothing", "old</em>&_new_home", "food_rituals", "assorted", "route_to_freedom", "artworks", "road_movement"]

Мой код:

var categorieGr = PostsArray.groupBy('category');
console.log(categorieGr);
var catNamesNoParse = Object.keys(categorieGr);
var catNames = [];
for (i = 0; i < catNamesNoParse.length; i++) {
    catNames.push(JSON.parse(catNamesNoParse[i]));
}
console.log(catNames);
var menu_cat_name;
for (var i = 0; i < catNames.length; i++) {
    $("#cat-menu ul").append('<li id="cat-' + catNames[i] + '"><span class="tab">' + catNames[i].replace(/\_/g, ' ').toUpperCase() + '</span></li>');
}

var selected_cat

$("#cat-menu ul li").click(function () {
    CatSelect = true;

    for (var i = 0; i < catNames.length; i++) {
        console.log(catNames[i])
        $("." + "cat-" + catNames[i]).css("background-color", "");
    }