How to toggle closest children class

Question

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.

<span class="button-checkbox">
    <button type="button" onclick="privateClick()" class="btn btn-sm btn-default">
        <i class="fa fa-square-o private"></i>
     <button>
     <input name="private" type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
    <button type="button" onclick="privateClick()" class="btn btn-sm btn-default">
        <i class="fa fa-square-o private"></i>
     <button>
     <input name="private" type="checkbox" class="hidden" />
</span>

I currently use:

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

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:

var closest_tag = $(this).find('.private').first();
closest_tag.toggleClass('fa-square-o fa-check-square-o');

Unfortunately, the class does not get toggled at all.

Any help would be greatly appreciated!

Answer 1

Get rid of your onclick event and just use jquery on event, like this:

$("button").on("click", function(){
var itag = $(this).find("i");
    itag.toggleClass('fa-square-o fa-check-square-o');
    itag.text(itag.attr("class"))
})

button{
  display:block;
  padding:50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="button-checkbox">
    <button type="button" id="1" data-color="white" class="btn btn-sm btn-default">
        <i class="fa fa-square-o private"></i>
        </button>
     <input name="private" type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
    <button type="button" id="1" data-color="white" class="btn btn-sm btn-default">
        <i class="fa fa-square-o private"></i>
        </button>
     <input name="private" type="checkbox" class="hidden" />
</span/>