How can I change the Bootstrap toggle state dynamically?

Question

I'm trying to add new bootstrap toggle switch dynamically but I don't know how to change the state dynamically. Thanks in advance!

$('.btn').on('click', function () {
var status = true;    
    for(var i=0; i<3; i++){
        $('p').after(
            '<input id="newCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
        );
        console.log(status);
        $('.newBSswitch').bootstrapSwitch('state', status);
        status = false;
    }
});

<p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>

Here is the fiddle: http://jsfiddle.net/icamilo95/8wars2ep/7/

Answer 1

I realized I just had to add different Id's to the inputs and change the class .newBSSwitch for every specific Id like this:

$('.btn').on('click', function () {
var status = true;    
    for(var i=0; i<5; i++){
        $('p').after(
            '<input id="newCheckBox'+[i]+'" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
        );
        console.log(status);
        $('#newCheckBox'+[i]).bootstrapSwitch('state', status);
        status = false;
    }
});

 <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>