Clicking on an item and having all the classnames changed for all items with the same username

I have a list of chats on html.

Is there a way for me to add a classname to only the item that I clicked along with the items on the list with similar usernames?

<div id="chats">

     <div class="chat">
           <div class="username">Sam</div>
     </div>

    <div class="chat">
           <div class="username">Sam</div>
     </div>

    <div class="chat">
           <div class="username">Sam</div>
     </div>


    <div class="chat">
           <div class="username">Frank</div>
     </div>

<div>

For example, if I clicked the first “Sam” is there a way for me to have all the “Sams” classnames change to “username highlight.” So all the Sam’s would have their class name changed (classname = username sam) except the last one Frank (classname = username).

1 Like

Hi @camperextraordinaire, my apologies, I meant to say when I click on sam, all the one’s that state “Sam” should have a classname of “username highlight.”

Why do I care if the user clicks on the name and What is the ultimate purpose in doing any of this??

I wanted to make all the ones with a text “Sam” get highlighted.

I have a css file that basically adds css to any class with the class name “highlight” in it. I just wanted to see if I click on “Sam” can I make all the other Sam’s classname’s include “highlight” so that all the “Sam’s” have css added to it?

Is the username unique? If so then probably add a class based on the username:

<div class="username user_sam">Sam</div>

And then you can easily target all elements with class user_sam.

Update: Ahh, I see @camperextraordinaire already suggested this, I didn’t read his reply carefully enough. Sorry about that.

Thank you for taking the time to message me! I was able to figure it out, I appreciate your time!

Thank you, this answered my question and it worked!