如何在Jquery中的.ech(）中包含动态添加的输入值

我有一个系统，用户可以在其中创建或编辑游戏，有时用户可能需要增加每个游戏的"最大玩家"数量。当屏幕最初加载时，系统向用户提供游戏已经具有的相应数量的输入。因此，如果一个游戏的最大玩家数量为3，它将显示3个文本输入。

有时，用户可能需要增加已经保存的游戏的"最大玩家"数量。因此，如果原始游戏最多有3名玩家，然后增加到最多5名玩家，系统将自动在屏幕上添加2个新的文本输入。

当用户完成后，将单击"保存"按钮，系统将根据其类别查找每个输入。对于下面的示例，它将查找两个类，er-offpeak-2和er-peak-2，并将所有er-offpeak-2类分组在一起，将所有er-peak-2类分组在一起来。然后找到的所有值都被附加到一个字符串中，然后将该字符串保存到数据库中。目前，当显示原始的3个输入时，HTML看起来是这样的：

<table>
    <tbody>
        <tr class="editrow-2 er-container" style="display:none;">
            <td><input type="text" value="3" id="er-maxplayer-2" class="maxplayerinput" data-gameid="2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="2">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
    </tbody>
</table>

这是我的HTML后，最大玩家增加到5:

<table>
    <tbody>
        <tr class="editrow-2 er-container" style="display:none;">
            <td><input type="text" value="5" id="er-maxplayer-2" class="maxplayerinput" data-gameid="2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="2">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="2">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
    </tbody>
</table>

这是我的JQuery代码，它正在查找所有这些类，然后将它们分组在一起：

var offPeaks = '';
var peaks = '';
$('.er-offpeak-2').each(function(){
    if($(this).val() !== 'N/A') {
        var optionSelected = $(this).val()+'/';
        offPeaks += optionSelected;
    }
});
$('.er-peak-2').each(function(){
    if($(this).val() !== 'N/A') {
        var optionSelected = $(this).val()+'/';
        peaks += optionSelected;
    }
});

我目前的问题是，上面的JQuery代码似乎只能看到加载页面时创建的输入，而不包括动态添加到表中的输入。

我可以做些什么来包括动态添加的输入？