Could someone help me understand why this code works in Firefox but not in Safari or Chrome?
The variable newClass retrieves the value from a select box, which is then used to create a selector for adding or removing classes using addClass/removeClass.
I've tried different approaches like including the . in the variable itself instead of within the selector, but the outcome remains unchanged.
$(document).ready(function() {
$('.first_place_selection').click(function() {
var newClass = $('#first_place').find(':selected').text();
$("." + newClass).removeClass('second-active');
$("." + newClass).removeClass('third-active');
$("." + newClass).addClass('first-active');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom-select d-block w-100" id="first_place" name="first_place" autocomplete="off" required>
<option value="">Select...</option>
<option class="first_place_selection" value="team1">team1</option>
<option class="first_place_selection" value="team2">team2</option>
<option class="first_place_selection" value="team3">team3</option>
<option class="first_place_selection" value="team4">team4</option>
</select>
<div class="entry-number team1">1</div>
<div class="entry-number team2">2</div>
<div class="entry-number team3">3</div>
<div class="entry-number team4">4</div>