Jquery Conditional Class add - html

Question

So I'm working on this small frontend project with some jQuery I wanted to do something where there is a list of names and if you click it, a class of "selected" should be added, but I want to remove that class if some other option is selected.
So suppose Name-1 is selected It gets a background Color Change, but If Name-2 is selected right after the background color for Name-1 should go away and add to Name-2, and I have multiple names so I can't make a function for every single option.
I was wondering if there is a easier way to do it.
HTML
<ul class="names">
<li class="name selected">Name-1</li>
<li class="name">Name-2</li>
<li class="name">Name-3</li>
</ul>
CSS
.selected {
background-color: rgba(0, 0, 0, 0.3);
}

Answer 1

you can do it like this:
$("ul.names li").on("click", function(){
$("ul.names li").removeClass("selected");
$(this).addClass("selected");
})
EDIT - explanation
you select all the <li> tags by this selector ul.names li and manipulate them together, first you remove the selected class from all li tags by this $("ul.names li").removeClass("selected"); and then you add selected class to the chosen li tag represented by the this key word
$("ul.names li").on("click", function() {
$("ul.names li").removeClass("selected");
$(this).addClass("selected");
})
.selected {
background-color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="names">
<li class="name selected">Name-1</li>
<li class="name">Name-2</li>
<li class="name">Name-3</li>
</ul>

Answer 2

Something like this should work.
$('.name').on('click', function() {
$('.name').removeClass('selected').css('background','none');
$(this).addClass('selected').css('background',$(this).data('bg'));
});
$('.name.selected').css('background',$('.name.selected').data('bg'));
.selected {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="names">
<li class="name selected" data-bg="green">Name-1</li>
<li class="name" data-bg="red">Name-2</li>
<li class="name" data-bg="blue">Name-3</li>
</ul>