Javascript 如何使用Jquery获取添加的输入字段的值？

我试图从添加的输入字段中获取值，并将其显示在文本区域中

单击codeBtn后，将添加输入字段的值，并将其添加到文本区域。我只从HTML中创建的第一个输入字段中获取了值

此外，我还尝试添加新的值输入字段

let titleValue2 = $('#titleInput2').val();

let contentValue2 = $('#contentInput2').val();


totalString += (titleValue1 + contentValue1 + titleValue2 + contentValue2)

但当我只想显示titleInput1和contentInput1的值时，这会给我“未定义”的信息。 基本上，我尝试的是从每个添加的输入字段中获取文本区域的值。 有人能帮我吗？多谢各位

示例HTML代码：

<div class="btn-section">
            <button class="addButton">+</button>
            <button class="codeButton">Generate code</button>
        </div>

<div class="container">
    <label for="">Titel:</label>
    <input type="text" id="titleInput1">

    <label for="">Content:</label>
    <input type="text" id="contentInput1">
</div>
<div class="newInputs">

</div>
<textarea name="" id="textInput" cols="30" rows="10"></textarea>

+
生成代码
滴度：
内容：

JQuery代码：

let inputCount = 1;
let totalString = ''
const defaultInput_firstpart = `<label for="">Titel:</label>
<input type="text" id="titleInput`
const defaultInput_secondpart = `">
<label for="">Content:</label>
<input type="text" id="contentInput`
const defaultInput_lastpart = `">`

function addNewInputs() {
    $('.newInputs').append(defaultInput_firstpart + inputCount + defaultInput_secondpart + inputCount + defaultInput_lastpart)
}

function addValues() {
    let titleValue1 = $('#titleInput1').val();
    let contentValue1 = $('#contentInput1').val()
    let titleValue2 = $('#titleInput2').val();
    let contentValue2 = $('#contentInput2').val()


    totalString += (titleValue1 + contentValue1 + titleValue2 + contentValue2)

}

$(document).ready(function() {

    $('.addButton').on('click', function() {
       inputCount++;
       addNewInputs();

    })

    $('.codeButton').on('click', function() {
        addValues();
        $('#textInput').text(totalString)

    })

})

let inputCount=1；
让totalString=''
const defaultInput_firstpart=`Titel:
内容：
`
函数addNewInputs（）{
$（'.newInputs'）.append（defaultInput\u firstpart+inputCount+defaultInput\u secondpart+inputCount+defaultInput\u lastpart）
}
函数addValues（）{
设titleValue1=$（'#titleInput1'）.val（）；
让contentValue1=$（'#contentInput1'）.val（）
设titleValue2=$（'#titleInput2'）.val（）；
设contentValue2=$（'#contentInput2'）.val（）
totalString+=（标题值1+contentValue1+titleValue2+contentValue2）
}
$（文档）.ready（函数（）{
$（'.addButton'）。在（'单击'，函数（）上）{
inputCount++；
addNewInputs（）；
})
$（'.codeButton'）。在（'单击'，函数（）上）{
addValues（）；
$（'#textInput'）.text（totalString）
})
})

而是使用动态创建的id使用类来获取输入值。 下面是一个例子

let inputCount=1；
让totalString=''
const defaultInput_firstpart=`Titel:
内容：
`
函数addNewInputs（）{
$（'.newInputs'）.append（defaultInput\u firstpart+inputCount+defaultInput\u secondpart+inputCount+defaultInput\u lastpart）
}
函数addValues（）{
totalString=“”；
$（“.nwlist”）。每个（函数（）{
totalString=totalString++$（this）.find（“.titleInput”）.val（）++$（this.find（.contentInput”）.val（）++；
})
}
$（文档）.ready（函数（）{
$（'.addButton'）。在（'单击'，函数（）上）{
inputCount++；
addNewInputs（）；
})
$（'.codeButton'）。在（'单击'，函数（）上）{
addValues（）；
$（'#textInput'）.text（totalString）
})
})

+
生成代码
滴度：
内容：