Show Loader for multiple buttons-CodePudding

I want to show loader on icon/button click. In foreach loop, there is a list with delete icon. While click delete icon i want to show loader near that particular icon. I am using like below.

Html code:

<span id="deletefile">
     <i ></i>
     <div class='loader' style='display:none'></div>
 </span>

Jquery code:

$('span#deletefile').click(function() {
  $('#deletefile').find('.loader').show(); 
}

Since it is a loop, the loader visible near each delete icons. How to show loader at particular click icon. Pls give me idea

Edited as per Satya S answer. It triggers always first icon. Where I am doing wrong?

CodePudding user response：

If you are creating that html in a loop you will have multiple elements with the same id which is invalid.
Instead, use a class.

<span >
     <i ></i>
     <div class='loader' style='display:none'></div>
</span>

$('span.deletefile').click(function() {
    $(this).find('.loader').show(); 
}

CodePudding user response：

Add id attribute to your button. Then you should be able to do -

$('#delete-button-id').find('.loader').show()

This is will find the child loader to each delete button and show that. Make sure the loader is a child of the delete button with the id.