Checkbox condition database coldfusion

Hi everybody i have this issue to fix, but I dont get the right code to work. What i want to do is:

I have these two list of persons, boys and girls, that came in a loop inside of a database, to people voted for them, but the condition is the just can vote for one girl and one boy. I am trying to do this with this code:

<script type="text/javascript">
$('input:checkbox').click(function() {
$(this).parent().addClass('profile-check');
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("Allowed only 2 votes.");
$(this).prop('checked', false).parent().addClass('profile-error')
//$('input:checkbox').not(this).prop('checked',           false).parent().removeClass('bgcheck'); }
});</script>

, but the result is the people can check for two and this include boy and boy o girl and girl instead of just one boy and a girl.

code:

 <cfquery name="data" datasource="#dbMarks#">select left(tutgroup,2) as anio,appaterno,apmaterno,nombres,house,codigo,tutgroup  from studentCand 
where (tutgroup like 's4%' or tutgroup like '5B%')
group by left(tutgroup,2),appaterno,apmaterno,nombres,house,codigo,tutgroup
order by left(tutgroup,2) desc,appaterno,apmaterno,nombres
</cfquery>


<div class="container">
<div class="row mtc">
    <cfoutput query="data" group="anio">
    <cfoutput>  
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 profile-chart">
            <div class="portrait-settings">
            <img src="http://ift.tt/2bMUM8T" width="65px">
            </div>          
            <div class="details-chart">     
            <p class="mtc"><strong>#appaterno#</strong>, #nombres#</p>
            <span class="mtc">#anio# - </span>
            <span>#house#</span>
            <span>
            <input  type="checkbox" name="codigos"  value="#appaterno# #apmaterno# #nombres# (#tutgroup#)" required>
            </span>
            </div> 
        </div>
    </cfoutput>  
    </cfoutput>  

</div>

Hope you can help me, Thanks!