Javascript 变化仅在某些情况下产生，但并不总是如此

我试图根据我有多少输入元素来生成所有可能的变化。这是我生成的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>

颜色
大小
大小

颜色
添加颜色
大小
添加大小
增加尺寸
创造变化

这段代码是动态的，所以每次我点击“添加”按钮时，都会动态创建一个新元素，现在我只创建了一些用于测试的元素。如果你玩我做的这个游戏，你就会明白我说的“代码在某些情况下有效，但并不总是有效”的意思，我也找不到错误所在，所以我在这里向比我知识渊博的人寻求帮助。基本上，任何时候你点击“创建变体”按钮，一个新的UPC设置，价格和数量应该被创建，即使只有一个变体存在。什么是变异？例如，有两种颜色，或有两种尺寸，或有两种颜色和尺寸等等。有什么建议吗

这是一张在我的电脑上显示过程的图片

---

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

您的代码应该做什么，以及“失败”是什么意思？@TobiasZander我编辑了代码和标题，试图尽可能更明确，任何帮助都是值得的。很难理解这个问题。UPC的价格和数量是多少？小提琴中没有这样的输入字段。你想做什么？@JeevanJose它们不在HTML中，因为它们不是生成的，如果你选中一些复选框，并向动态创建的输入中添加值，你可以单击“创建变体”然后看看你前面提到的字段，如果你看一下jQuery代码，你会在那里看到它们，因为它们是在flySorry dude上创建的。如果我能理解这个问题，我会有所帮助的。