jQuery - triggering a click on radio button checks conditions before toggling

Sorry for the somewhat vague title, but I'll try to explain better. I wrote up some quick code in this codepen to show my problem.

Essentially, my codepen has two toggle buttons, "Male" and "Female" for ease. I also have a button and a click listener attached: $('#doClick').click(function() {...}.

When the button is clicked, the click listener toggles the female button by calling $("#female").click();

My issue is that when the page first loads up and "Male" is selected by default, pressing the button changes the toggle button, but it still spits out "Male is checked" in the console. So essentially, the if condition in the click listener is checked before the radio button is actually toggled to "Female".

This is part of a bigger piece of code where different code is executed depending on what is currently selected, so in my code, incorrect code is being executed due to the timing of the toggle and the condition check.

I hope my problem is described well.

I'm wondering if anybody knows why this is so, and what I can do to fix this? The following code fixes this:

$('#male').click(function() {
  console.log("Male was checked")
});

$('#female').click(function() {
  console.log("Female was checked")
});

but I'm not sure two different click listeners are necessary, and was wondering if there is a better solution.

Thanks