Presented here is a table showcasing available dates and times. Users can select a specific time by clicking on the "Choose" link. Currently, when a user selects a time, the class "active" is applied. However, the desired behavior is to remove the previous class and apply it to the newly selected element.
Here is the current structure:
<div class="wrapper-div">
<div class="row">
<div class="date">monday, 2015 09 02 </div>
<div class="time">12:10</div>
<div class="select"><a href="#">Choose <span class="select-arrow"></span></a>
</div>
</div>
<div class="row">
<div class="date">thuesday, 2015 06 22</div>
<div class="time">12:30</div>
<div class="select"><a href="#">Choose <span class="select-arrow"></span></a></div>
</div>
<div class="row">
<div class="date">wensday, 2015 02 9</div>
<div class="time">09:15</div>
<div class="select"><a href="#">Choose <span class="select-arrow"></span></a></div>
</div>
</div>
Implemented jQuery code:
$('.select a').click(function(e){
e.preventDefault();
$(this).parents().eq(1).addClass('active');
$('.wrapper-div div').each(function(){
removeClass('active');
});
});
Refer to this working fiddle for an interactive example:
Seeking advice on the most effective solution for this scenario.