Adding data dynamically to cloud firestore

Question

I have an HTML form that I wanna to use to generate dynamically ADD more input fields:

 <div class="row cloneDefault">
 <div class="form-group col-md-1">
 <br />
 <h4 style="text-align:right">1.</h4>
 </div>
 <div class="form-group col-md-1">
 <label class="control-label">First name</label>
 <input type="text" value='' class="form-control" id="FirstnameField"/>
 </div>
 <div class="form-group col-md-2">
 <label for="sname" class="control-label">last name</label>
 <input type="text" value='' class="form-control" id="lastnameField"/>
 </div>
 <i class="remove">remove</i>
 </div>
 <form class="frm">
 <div class="row">
 <div class="form-group col-md-1">
 <br />
 <h4 style="text-align:right">1.</h4>
 </div>
 <div class="form-group col-md-1">
 <label for="fname" class="control-label">First name</label>
 <input type="text" value='' class="form-control" id="fname"/>
 </div>
 <div class="form-group col-md-2">
 <label for="sname" class="control-label">last name</label>
 <input type="text" value='' class="form-control" id="sname"/>
 </div>
 <i class="remove">remove</i>
 </div>
 <i class="add"> Add </i>
 </form>
<style> 
.cloneDefault{
 display: none;
}
</style>

And JS to handle adding input fields dynamically:

$(document).ready(function() {
 $(".add").click(function() {
 $(".cloneDefault").clone(true).insertBefore(".frm > div:last-child");
 $(".frm > .cloneDefault").removeClass("cloneDefault");
 return false;
 });
 $(document).on('click', '.remove', function() {
 $(this).parent().remove();
 });
});

Now, I can easily retrieve text value from an input field by element id and then query cloud firestore:

const first_name = document.querySelector('#fname').value;
const last_name = document.querySelector('#sname').value;
firebase.firestore().collection("users").add({
 fame: first_name,
 sname: last_name,
}).then(function () {
 console.log("success");
 })
 .catch(function (error) {
 console.log("error:", error);
 });

But how to save dynamically generated input fields in JS and save them on cloud firestore? I realised that my code to generate dynamically added input data may be unsuitable if I'd like to use it afterwards. What I wanted to do is similiar as this . Any idea?

• Doug Stevenson: It's not clear to me what you mean by "dynamicaly". How is that different than what you have now? Please edit your question to explain the problem you're trying to solve.
• Stone: Hi Doug thanks for letting me know. I have edited my question!
• LeadDreamer: I think what your looking for is how to use the value of a variable as the index/field name? Not really a Firestore question, but you can use { [fieldnameVariable]: fieldvalueVariable }. Note the '[ ]' . This is basic javascript object notation. (and yes, I use exactly this in many, many places for a JS/React/Firestore application)
• Stone: @LeadDreamer Hi, yes I realised this is more likely a JS data structure problem. Currently I used arrays + basic For loop to solve it, but it seems not neat. Would happy to know your solution and I will pick yours to close this post.