Anahit DEV Anahit DEV - 5 months ago 19
Javascript Question

Get next element with same class in jquery on click

I am trying to create the following.

I have a button and on click of that button i need to add some active class to a div, but i have 4 divs with same class. What am trying to create is like a Choose Bet system like when you click first time on button you choose the first bet, when second time the second, i have 4 bets.

My html structure is the below

<div class="game_paytable_bluebet_column game_paytable_column"></div>
<div class="three_bet_wrappaer">
<div class="game_paytable_greenbet_column game_paytable_column"></div>
<div class="game_paytable_orangebet_column game_paytable_column"></div>
<div class="game_paytable_redbet_column game_paytable_column"></div>

What i did so far with jquery see below


With this code it is getting 2 elements.

Any idea how to get a solution to this?

Thanks in advance.


Using :eq() you can achieve your requirement. And initialize a counter and based on the counter add class in div. And every four click make the counter 0.

Please check this snippet.

var _click = 0;
  if((_click % $(".game_paytable_column").length)==0){_click=0;}  

    $(".in_sight_area").html('<div class="top_bet_column_two top_bet_column game_paytable_column">New One</div>');
<script src=""></script>
 <div class="in_sight_area"></div>

<div class="game_paytable_bluebet_column game_paytable_column">1</div>
<div class="three_bet_wrappaer">
  <div class="game_paytable_greenbet_column game_paytable_column">2</div>
  <div class="game_paytable_orangebet_column game_paytable_column">3</div>
  <div class="game_paytable_redbet_column game_paytable_column">4</div>
<button class="choose_bet_button">Choose Bet</button>

<div class="game_paytable_redbet_column game_paytable_column">5</div>