jquery - Javascript - load spinner infront of the particular button -

i have button , spinner div

<button type = "button" value= "make current" class = "current_button"> </button> <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">     <small>updating... <i class="fa fa-refresh fa-spin"></i></small> </div> 

i using ruby on rails loop , show multiple buttons , want show spinner infront of button being clicked user. have done

$('.current_button').on('click', function() {     $('.loading_spin_current').show(); }); 

but shows spinner in front of button . please tell me how can , thankx in advance!

$('.loading_spin_current') selects elements class loading_spin_current, want select element after button use next() method

$('.current_button').on('click', function() {         $(this).next('.loading_spin_current').show(); }); 

next() : following sibling of each element in set of matched elements. if selector provided, retrieves next sibling if matches selector. ( taken https://api.jquery.com/next/ )

$('.current_button').on('click', function() {    $(this).next('.loading_spin_current').show();  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>  <button type="button" value="make current" class="current_button"></button>  <div class="place-left margin_l20 margin_t5 loading_spin_current" style="display: none">    <small>updating... <i class="fa fa-refresh fa-spin"></i></small>  </div>

update : if want toggle between show , hide use toggle() instead show()

$('.current_button').on('click', function() {         $(this).next('.loading_spin_current').toggle(); });