I've build an interactive table where you can manually add and delete rows (with bootstrap). This all works fine!

Now comes the problem:
I have some input fields with an automatic calculation. But the problem is, the table only performs the calculation in the standard row, and not in the addable row.

This is the .HTML and .JS of the table:

```js
jQuery(document).delegate('a.add-record_venr', 'click', function(e) {
    e.preventDefault();
    var content = jQuery('#sample_table_venr tr'),
    size = jQuery('#tbl_posts_venr >tbody >tr').length + 1,
    element = null,
    element = content.clone();
    element.attr('id', 'rec_venr-'+size);
    element.find('.delete-record_venr').attr('data-id', size);
    element.appendTo('#tbl_posts_body_venr');
    element.find('.sn').html(size);
    });
    jQuery(document).delegate('a.delete-record_venr', 'click', function(e) {
    e.preventDefault();
    var didConfirm = confirm("Ventilatierooster verwijderen?");
    if (didConfirm == true) {
    var id = jQuery(this).attr('data-id');
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#rec_venr-' + id).remove();

    //regnerate index number on table
    $('#tbl_posts_body_venr tr').each(function(index) {
    //alert(index);
    $(this).find('span.sn').html(index+1);
    });
    return true;
    } else {
    return false;
    }
    });
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="wellclearfix">
<a class="btn btn-primary pull-right add-record_venr" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a>
            </div>

            <div class="container-fluid" style="margin-left:1px ;">
                  <table class="table table-stripped" id="tbl_posts_venr">
                    <thead style="background-color:#c7c8cc; width: 100% !important;">
                      <tr>
                        <th style="width:30px ;">Merk</th>
                        <th >Lengte rooster</th>
                        <th >Type rooster</th>
                        <th >Capaciteit [dm3/s]</th>
                        <th >Max. capaciteit [dm3/s]</th>
                        <th >Verblijfsgebied</th>
                        <th >Verblijfsruimte</th>
                        <th >Verwijderen</th>
                      </tr>
                    </thead>
                    <tbody id="tbl_posts_body_venr">
                      <tr id="rec_venr-1">
                        <td><input class="inputtext" type="text" name="" placeholder="Merk"> </td>
                        <td><input class="inputtext" type="text" name="lrooster" id="lrooster" placeholder="Lengte rooster"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Type rooster"></td>
                        <td><input class="inputtext" type="text" name="caprooster" id="caprooster" placeholder="Capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="maxcaprooster" id="maxcaprooster" placeholder="Max. capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsgebied"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsruimte"></td>
                        <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>

              <div style="display:none;">
              <table id="sample_table_venr">
                <tr id="">
                  <td><input class="inputtext" type="text" name="" placeholder="Merk"> </td>
                  <td><input class="inputtext" type="text" name="lrooster" id="lrooster" placeholder="Lengte rooster"></td>
                  <td><input class="inputtext" type="text" name="" placeholder="Type rooster"></td>
                  <td><input class="inputtext" type="text" name="caprooster" id="caprooster" placeholder="Capaciteit [dm3/s]"></td>
                  <td><input class="inputtext" type="text" name="maxcaprooster" id="maxcaprooster" placeholder="Max. capaciteit [dm3/s]"></td>
                  <td><input class="inputtext" type="text" name="" placeholder="Verblijfsgebied"></td>
                  <td><input class="inputtext" type="text" name="" placeholder="Verblijfsruimte"></td>
                  <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
               </tr>
             </table>
             </div>
          </div>
      </div>
      </table>
```

This is the JavaScript of the calculation:

```js
$('#lrooster, #caprooster').keyup(function(){
    var lrooster = parseFloat($('#lrooster').val());
    var caprooster = parseFloat($('#caprooster').val());

    $('#maxcaprooster').val(lrooster * caprooster );
});
```

If the linked code doesnt work good, here 's a [fiddle](https://fiddle:https://jsfiddle.net/Wiljan123/7ub1c6y0/)

thanks in advance!!