Adding Select value, however Adding new Selects with (Java Script)

Personal Wave,

Add selection is already working, a new select is opened at the bottom, and you can delete it ... but now I need each of these to disappear with the others ... if you delete, the sum is taken. .. and if you add another select, add ...

I did some research and I do not know how I can do this ...

I believe that I put onBlur on every select that appears, because by choosing it, it will automatically update ...

<select name="service[]" onblur="sumSelect()" id="service" class="selectpicker form-control" data-live-search="true" placeholder="Serviços">

I believe that I place within each option, data-price

<option value="<?php $array['service_id']; ?>" data-price="<?php $array['service_value']; ?>">             
      <?php echo utf8_encode($array['service_id']) . " | " . utf8_encode($array['service_name']) . " | R$" . utf8_encode($array['service_value']); ?>
      </option>

Now, I believe that for this to work ... should have a FOR to pick the "new" added selects ...

jQuery(document).ready(function() { jQuery('select[name="service[]"]').change(function() {

  let selects = jQuery("select[name=\"service[]\"]");
  let valueForSelect = 0;

  /* Captura e soma o valor de todos os select */
  $(selects).map(function(i, e) {
    valueForSelect += parseFloat( $(e).find(':selected').data('price').toString() );
  });

  /* Exibe o valor */
  $('#preview_value').val( valueForSelect )
});

});

Now, with all of this, it gives a "NaN" error

Follow the Link to the page to better understand Click Here