How can I use JavaScript to add CSS styles to a list element when clicked, but remove it when another li item is clicked?

Question

I have JavaScript to make an li element bold and underlined when clicked as part of a category selector in a sidebar.

The code is here:

  $('li').click(function(e){
    $(this).css('font-weight','bold');
  $(this).css('text-decoration','underline');
})

I'm using Hubspot and the code for the sidebar where someone can manually set a category name and then it's applied to the list element for sorting purposes:

<ul class="category-sidebar">
        {% for item in module.poll_sidebar_categories %}
        <li class="{{ item.poll_sidebar_category }}">{{ item.poll_sidebar_category }}</li>
        {% endfor %}
      </ul>

I can add more code for background as needed but the sidebar appears like so:

The only problem is this code persists even when I click other options (like "all", or show category "Retention", etc). How can I have it so the css unapplies once a different li item is clicked and then the styles are applied to the new li item only?

I've tried to change to a href or add it within the li tags but it doesn't work with the other JS so I wanted to see if this was possible as list items

Answer 1

var ul = document.getElementsByClassName("category-sidebar");
var li = document.createElement("li");
li.classList.add("[your_new_category]");
li.innerHTML = "your_new_category"
ul.appendChild(li);

you'll have to create and then add javascript elements to parent nodes.

Lets first get reference to our object by its classname create new li element in the dom set classname next, I am assuming you have your new category name in your js append that newly created li to our ul element from the first line.

Hope this helps