仅在某些情况下生成变体，但并非总是如此

Question

我正在尝试生成所有可能的变化，具体取决于我有多少输入元素。这是我生成的HTML代码的一部分：

<section id="choices_picker">
    <ul>
        <li><input type="checkbox" name="color" id="color_choice5" value="5"> Color</li>
        <li><input type="checkbox" name="talla" id="talla_choice6" value="6"> Size</li>
        <li><input type="checkbox" name="talla" id="talla_choice13" value="13"> Size</li>
    </ul>

    <div id="color_choice_5" style="">
        <span>Color<input type="text" name="input_color[]" class="field_color" data-id="color_5" placeholder="Color"><br></span><button type="button" class="button color">Add color</button>
    </div>
    <div id="talla_choice_6" style="">
        <span>Size<input type="text" name="input_talla[]" class="field_talla" data-id="talla_6" placeholder="Size"><br></span><button type="button" class="button talla">Add size</button>
    </div>
    <div id="talla_choice_13" 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=""></section>
</section>

此代码是动态的，因此每次单击“添加”按钮时，都会动态创建一个新元素，此时我只创建了一些仅用于测试目的。如果你玩这个Fiddle我做了那么你可以看到我的意思“代码在某些情况下工作，但并不总是”，我找不到错误的位置，所以我在这里请求一些人的帮助最好的知识比我。基本上，只要您点击“创建变体”按钮，就会创建一个带有UPC，价格和数量的新集合，即使只存在一个变体。什么是变化？例如有两种颜色，或者有两种尺寸或者有两种颜色和尺寸等等。对此有任何建议吗？

这是显示我计算机上的过程的图像

PS：欢迎对代码进行任何改进，我还在学习jQuery