Jquery- add css onclickは最初のクリックでのみ動作します

Question

ラベルが2つあるので、クリックして回転させます。私はそれにJQueryを使用しましたが、最初のクリックでのみ動作します！ クリックごとにどのように動作させることができますか？

$(document).ready(function() { 
 
    $(document).on("click", "#male", function() { 
 
    $('#male i').css({ 
 
     'transform': 'rotate(360deg)' 
 
    }) 
 
    }) 
 
});

#male i, 
 
#female i { 
 
    transition: 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<label id="male" class="pull-left text-center col-md-5 btn btn-default" style="height: 36px;"> 
 
    <i class="fa fa-2x fa-male text-center" style="color: tomato"> 
 
    <input type="radio" name="gender" value="male" checked> 
 
    </i> 
 
</label> 
 
<label id="female" class="pull-right text-center col-md-5 btn btn-default" style="height: 36px;"> 
 
    <i class="fa fa-2x fa-female text-center" style="color: purple"> 
 
    <input type="radio" name="gender" value="female"> 
 
    </i> 
 
</label>

Answer 1

maleRotation = 0; 
$(document).on("click", "#male", function() { 
     maleRotation+= 360; 
     $('#male i').css({ 
      'transform': 'rotate('+maleRotation+'deg)' 
     }) 
    })