Multiple Tab Handling with JS (DOM)

Question

<ul class="search-tabs">
<li class="rent active">Rent</li>
<li class="buy">Buy</li>
<li class="sell">Sell</li>
</ul>

<form id='rent' class='visible'>
<form id='buy'>
<form id='sell'>

This is my code and I wan't to create a feature that does the following:

• adds 'active' into the li's classList, when I click it.
• but only when the form has className = 'visible' and that form's id = the clicked li's classList. Else, it removes the 'active' from the li's classList.

It adds the 'active' class, but doesn't remove the 'active' class from the other li's that have not been clicked. Any solution? Please help!