Code is not working when only one checkbox is checked

Code is not working when only one checkbox is checked

I'm trying to generate possible variations based on inputs element. This
is the HTML code I've:
<section id="choices_picker">
<ul>
<li><input type="checkbox" name="color" id="color_choice"
value="5"> Color</li>
<li><input type="checkbox" name="talla" id="talla_choice"
value="6"> Size</li>
</ul>
<div id="color_choice_5" style="">
<button type="button" class="button color">Add color</button>
</div>
<div id="talla_choice_6" style="display: none">
<button type="button" class="button talla">Add size</button>
</div>
<button type="button" class="button create-variation"
id="create-variation" style="">Create variation</button>
<section id="variations_holder" style="display: none">
</section>
</section>
I created this jsFiddle for testing purpose. The code works fine if I
check both color and size but if I mark just one it fails and I can't find
where the problem is, it's supposed that if I have two colors then I
should create variations for those two colors the same for size but isn't
working, any help? What I miss?
PS: Any improvement on code is welcome, I'm still learning jQuery