Using variable value from Panel to Dynaform input

Question

Im creating my own Data Grid (instead of using the ProcessMaker's Dynaform Datagrid) for a project.

Everything regarding my DataGrid code is working, I just can't setValues of my processmaker variables from the panel content.

Here is my panel component's html and dynaform's jquery:

var frmt = {format: 'DD/MM/YYYY', viewMode: 'days'};
$('.dateP').datetimepicker( frmt );

// duplicate the row
$('.dupli').on( 'click', function(e){
  if( $('.cpy').last().find('input').first().val() != ''
    && $('.cpy').last().find('input').last().val() != '' ){    
      var dup = $('.cpy').first().clone();
      $('.table').append( dup );
      $('.dateP').datetimepicker();
      calc(); // on creation of new row do the calc
  }
});

// remove the row
$(document).on( 'click', '.remove', function(el){ 
  if( $('.cpy').length > 1 ){
    $(this).parent().parent().remove(); 
 calc();
  }
});
// function for calc
function calc(){
  var kp = $('.price').val(); // price
  var sum = 0;
  $('.km').each( function(ix){
    sum += $(this).val() * kp;
  });
 $('.fin').val( sum );
}


// on input update the total
$(document).on( 'change input', '.km', calc );
$('.price').on( 'change input', calc );

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>


<div class="form-inline col-md-6">
  <div class="form-group">
  Price per Km: <input type='text' class="form-control price" value="0.36"/></div>
</div>

  <table class="table table-striped">
      <tr>
       <th>Date:</th>
       <th>From:</th>
       <th>To:</th>
          <th>Km Nr:</th>
          <td><button type="submit" class="btn btn-default dupli">+</button></td>
      </tr>
      <tr class="cpy">
          <td>
            <div class='input-group dateP'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
          </td>
          <td>
              <input type="text" class="form-control" >
          </td>
          <td>
              <input type="text" class="form-control" >
          </td>
          <td>
              <input type="number" class="form-control km" step="0.01" min="1">
          </td>
          <td>
            <i class="fa fa-trash remove" aria-hidden="true"></i>
          </td>
      </tr>
  </table>

<p class="form-inline">Total expenses: <input type='text' class="form-control fin"/></p>

Here is a screenshot of my Dynaform: https://image.ibb.co/nApj3F/Capture.png

What I need? I would like to atribute to the input "Expenses Total" (#ExpensesTotal) the sum of: "Parking + Tools" (#ExpenseParkTolls) + "Meals" (#ExpenseMeals) + "Other" (#ExpenseOther) + .fin class value (from the panel).

Thank you very much.