Append Multiple Data Into Table - html

Question

I'm trying to append multiple data (from date form) into table, using Jquery and MomentJS. But the result not showing what I want.
Here's my code :
$(".btnNext").on('click', function(e) {
var Day = 1;
var newDay = Day++;
var fromDate = $('#campaign_start_period_id').val(),
toDate = $('#campaign_end_period_id').val(),
from, to, druation;
from = moment(fromDate, 'YYYY-MM-DD');
to = moment(toDate, 'YYYY-MM-DD');
/* using diff */
duration = to.diff(from, 'days')
let date = [];
for (var m = moment(fromDate); m.isBefore(toDate); m.add(1, 'days')) {
date.push(m.format('MMM. DD, YYYY'));
}
var tr = '<tr class="v-middle">';
tr += '<td>' + newDay + '</td>';
tr += '<td class="text-color">' + date + '</td>';
tr += "</tr>";
$('#result tbody').append(tr);
});
<script src="https://unpkg.com/moment#2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_start_period" placeholder="dd M yyyy" type="text" value="{{ campaign_start_period }}" />
<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_end_period" placeholder="dd M yyyy" type="text" value="{{ campaign_end_period }}" />
<button class="btnNext" value="" type="button">Next</button>
<table class="table toggle-circle table-hover table-striped" id="result">
<thead>
<tr>
<th>Days</th>
<th>Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My code append "date" inside one "<tr><td></td></tr>" and not adding other "<tr></tr>".
What I expect is to show data like this :

Answer 1

You should iterate on the date array and add each date to a 'tr' tag
$(".btnNext").on('click', function(e) {
var Day = 1;
var newDay = Day++;
var fromDate = $('#campaign_start_period_id').val(),
toDate = $('#campaign_end_period_id').val(),
from, to, druation;
from = moment(fromDate, 'YYYY-MM-DD');
to = moment(toDate, 'YYYY-MM-DD');
/* using diff */
duration = to.diff(from, 'days')
let date = [];
for (var m = moment(fromDate); m.isBefore(toDate); m.add(1, 'days')) {
date.push(m.format('MMM. DD, YYYY'));
}
var tr = '';
date.forEach((newDay,index) => {
tr += '<tr class="v-middle">';
tr += '<td>' + (index + 1) + '</td>';
tr += '<td class="text-color">' + newDay + '</td>';
tr += "</tr>";
});
$('#result tbody').append(tr);
});
<script src="https://unpkg.com/moment#2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_start_period" placeholder="dd M yyyy" type="text" value="{{ campaign_start_period }}" />
<input class="form-control" type="date" id="campaign_start_period_id" maxlength="None" name="campaign_end_period" placeholder="dd M yyyy" type="text" value="{{ campaign_end_period }}" />
<button class="btnNext" value="" type="button">Next</button>
<table class="table toggle-circle table-hover table-striped" id="result">
<thead>
<tr>
<th>Days</th>
<th>Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>