appending checkbox and inputbox value to a html table

Question

I am Having a difficult time in appending checkbox value into a editable table and I was stock in here...

PS I am using codeigniter...

<div class="col-md-6">
<div class="form-group">
    <label for="exampleInputEmail1">Months</label>

    <?php foreach ($feetypeList as $feetype) { ?>
        <div class="checkbox">
            <label style="display: inline-block; max-height: 25px; list-style: none; float: left; padding-top: 5px; width: 130px; margin-right: 40px;">
            <input class="chkAdd" type="checkbox" name="feetype_id" value="<?php echo $feetype['id'] ?>" <?php echo set_checkbox('feetype_id', $feetype['id']); ?> ><?php echo $feetype['type'] ?>
            </label>
        </div>
    <?php } ?>
         <span class="text-danger"><?php echo form_error('feetype_id'); ?></span>
</div>

The table where must be inserted automatically when you check the checkbox

  <div class="box-body col-md-12">
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="feeMasterEntryTable">
        <thead>
            <tr>
                <th>Month</th>
                <th>Start Date</th>
                <th>Due Date</th>
                <th>Amount</th>
                <th>Penalty</th>
                <th class="text-right"></th></tr>
        </thead>
        <tbody class="form-horizontal" id="tbodyContent"></tbody>
    </table>
</div>
  </div>

Here is my javascript

  <script type="text/javascript">
    $('.chkAdd').click(function(){
    var text = "";
    $('.chkAdd:checked').each(function(){
        text += $(this).val()+ ',';
    });
    text = text.substring(0,text.lenght-1);
    $('#tbodyContent').val(text);
    });
  </script>

My actual table where the entered information must go:

Answer 1

Your js code has set wrong value when you use text += $(this).val()+ ','; in this case, this is refereed to the current click element,so you will get the same value for multiple times.

When you use each ,you need use element instead of this

$('.chkAdd').click(function(){
  var text = "";
  $('.chkAdd:checked').each(function(index,element){
    text += $(element).val()+ ',';
  });
  text = text.substring(0,text.lenght-1);
  $('#tbodyContent').val(text);
});

---

Updated answer,if you want to populate the table content of tbodyContent ,then $('#tbodyContent').val(text) is not valid.You can use either $('#tbodyContent').html(text) or $('#tbodyContent').append(text) depends on the value of text .

The value of text should be similar to below:

text='<tr><td>AA</td><td>BB</td></tr>'