html - jQuery - Change CSS of one element from many with same class identification -

I am working around a simple jQuery script that changes the background color of an element when clicked .

Here's my code:

  & lt; Script src = "// code.jquery.com/jquery-1.10.2.js"></script> & Lt; Div class = "radio" & gt; Text 1 & lt; / Div & gt; & Lt; Div class = "radio" & gt; Text 2 & lt; / Div & gt; & Lt; Div class = "radio" & gt; Text 3 & lt; / Div & gt; & Lt; Div class = "radio" & gt; Text 4 & lt; / Div & gt;  

I would like to have the following:

I click on "text1" and this div is changing its background color to red and it remains red.

P> I click on "text2" and the background color of "text1" is going back to white and then the background color of "text2" is going and the red is going on.

I hope you have a good

.red {background-color: red;}

  & lt; script src =" https://ajax.googleapis.com/ajax/libs/jQuery/110.2/jquery.min.js "& gt; & lt ; / Script & gt; div class = "radio" & gt; text1 & lt; / div & gt; div class = "radio" & gt; text2 & lt; / div & gt; & Lt; div class = "radio" & gt; text3  gt; div class = "radio" & gt; text4 & lt; / div & Gt;