unable to append data properly to a JS array variable

Question

I have 2 input fields inside a div within a form element like this

<form>
<div id="si-goal-section">
    <div class="si-goal-container">
        <input type="text" class="si-input goal-icon" name="goal-icon">
        <input type="text" class="si-input goal-title" name="goal-title">
    </div>
</div>
<div>
    <button type="button" id="goal-btn">Add goal</button>
</div>
</form>

When i click on the button "Add goal" i am appending a new "si-goal-container" div. This is the script for that

$('form #goal-btn').click(function() {
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
})

i then create an array variable in JS and collect and pass the form data into it like this

var data_to_send = []
$('form').find('.si-input').each(function() {
    if($(this).hasClass('goal-icon')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
    if($(this).hasClass('goal-title')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
})

So this approach will not work because the name fields are the same and the values just get over written. What else could be done here so i could store the appended data in the array and access it later in the php side ?

i tried something like this

var data_to_send = {}
data_to_send.goal = []
$('form').find('.si-input').each(function() {
    if($(this).attr('name') != undefined) {
        data_to_send.goal.push({
            'goalIcon': $(this).find('.goal-icon').val()
            'goalTitle': $(this).find('goal-title').val()
        })
    }
})

But this too doesn't give me the required o/p i am looking for. I need my data_to_send array to look something like this in the ajax call.

...
data_to_send['bannerImage']: 
data_to_send['goalName']:
data_to_send['goalIcon'][0]:
data_to_send['goalTitle'][0]:
data_to_send['goalIcon'][1]:
data_to_send['goalTitle'][1]:
...

What would be the right way to append the fields and store it into the array ? I i am using serialize() then how do i use it only for particular fields ?

Answer 1

Give an id to your first input elements of si-goal-section as below:

<div class="si-goal-container">
    <input type="text" id="goalicon_1" class="si-input goal-icon" name="goal-icon"/>
    <input type="text" id="goaltitle_1" class="si-input goal-title" name="goal-title"/>
</div>

now in JS on click event of button fetch the ids for title and icon from last si-goal-section and split it based on _ as below:

$('form #goal-btn').click(function() {
    var goalIconID=parseInt($(".si-goal-container:last .goal-icon").attr('id').split("_")[1])+1;
    //fetch .goal-icon's and goal-title's id by from last .si-goal-container and add + 1 [increment id]
    var goalTitleID=parseInt($(".si-goal-container:last .goal-title").attr('id').split("_")[1])+1;
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" id="goalicon_'+goalIconID+'" name="goal-icon"><input type="text" id="goaltitle_'+goalTitleID+'" class="si-input goal-title" name="goal-title"></div>');
    //add id to the newly created elements
})

Thus you can now have unique elements and push it to your array as values

DEMO