Adding dynamic form data to ajax post request

Question

Say i have a form in html with the following content

<form>
    <div id="si-main">
        <button id="si-btn">Add new content</button>
        <div class="si-content">
            <input type="text" class="si-input" name="content"> 
        </div>
    </div>

    <input type="submit" id="si-submit" value="Submit">
</form>

Now i wanna append the ".si-content" div when i click the "#si-btn" i do that using this script in JS

$('#si-btn').click(function() {
    $('#si-main').append('<div class="si-content"><input type="text" class="si-input" name="content"></div>')
})

I then submit the form like this in JS

$('form #si-submit').click(function() {
    var data_to_send = {}
    $('form').find('.si-input').each(function() {
        if ($(this).hasClass('si-input')) {
            data_to_send[$(this).attr('name')] = $(this).val()      
        }
    })
    //NEXT I SEND THE AJAX REQUEST AND HANDLE THE RESPONSE
})

Now the problem is each i append it adds a new "si-content" div. But when i send the data it only sends the content of the first div. Can someone tell me what would be the best way add the data in this case ?

Answer 1

try:

 $('#si-main').append('<div class="si-content"><input type="text" class="si-input" name="content[]"></div>');

$('form #si-submit').click(function() {
    var data_to_send =  $(this).parent('form').serialize();

    //NEXT SEND THE AJAX REQUEST AND HANDLE THE RESPONSE
})