How to toggle button on click?

How to toggle button on click?

Hi everyone!

The issue I face is that I have identical "button-checkboxes", but once of of them is clicked, I only want the closest private class to change.


  1.     <span class="button-checkbox">
  2.         <button type="button" onclick="privateClick()" class="btn btn-sm btn-default">
  3.             <i class="fa fa-square-o private"></i>
  4.          <button>
  5.          <input name="private" type="checkbox" class="hidden" />
  6.     </span>
  7.     <span class="button-checkbox">
  8.         <button type="button" onclick="privateClick()" class="btn btn-sm btn-default">
  9.             <i class="fa fa-square-o private"></i>
  10.          <button>
  11.          <input name="private" type="checkbox" class="hidden" />
  12.     </span>


I currently use:

  1.     function privateClick()
  2.     {
  3.         $(".private").toggleClass('fa-square-o fa-check-square-o');
  4.     }

to toggle the "checkbox button". But, obviously, if there is more then one button-checkbox, all of them toggle. So I have been trying with:

  1.     function privateClick()
  2.     {
  3.         $(this).find('i').toggleClass('fa-square-o fa-check-square-o');
  4.     }

Unfortunately, the class does not get toggled for buttons that were created through JavaScript after the page was loaded. I am modifying this script: https://blueimp.github.io/jQuery-File-Upload/ and it works the same. Once some one drags n drops a file into the browser, a new button will get created.

Any help would be greatly appreciated!