JSFiddle - React, Tailwind, and code Playground

HTML

<input id="addDestino" type="button" value="adicionar Destino" />
<table id="destinos">
  <thead>
    <tr>
      <th>NĂşmero de Adultos</th>
      <th>Destino da Viagem</th>
      <th>Custo Inicial Euros</th>
      <th>Custo Adicional Euros</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
      <td>Total</td>
      <td><span id="orcamento"></span></td>
    </tr>
  </tfoot>
</table>

<template id="tmplDestino">
  <tr>
    <td>
      <input type="number" name="qtdAdultos" min="1" max="12" />
    </td>
    <td>
      <select name="destino">
        <option />
        <option data-custo-ini="2000" data-custo-adi="1500">Destino 01</option>
        <option data-custo-ini="1500" data-custo-adi="1200">Destino 02</option>
        <option data-custo-ini="2500" data-custo-adi="1900">Destino 03</option>
        <option data-custo-ini="1000" data-custo-adi="800">Destino 04</option>
      </select>
    </td>
    <td><span name="custoInicial"></span></td>
    <td><span name="custoAdicional"></span></td>
    <td><span name="custoTotal"></span></td>
  </tr>
</template>

CSS

td {
  padding: 5px;
}

td input,
td select {
  width: 100%;
}

JavaScript

var tmplDestino = document.getElementById("tmplDestino").content;
var destinosTBody = document.querySelector("#destinos tbody");
var addDestino = document.getElementById("addDestino");
var spanOrcamento = document.getElementById("orcamento");
var formater = new Intl.NumberFormat('pt-PT', {
  style: 'currency',
  currency: 'EUR'
});
var destinos = [];

var Destino = function() {
  var that = this;
  this.dom = {};
  this.dom.linha = document.importNode(tmplDestino, true);
  this.dom.qtdAdultos = this.dom.linha.querySelector("[name='qtdAdultos']");
  this.dom.destino = this.dom.linha.querySelector("[name='destino']");
  this.dom.custoInicial = this.dom.linha.querySelector("[name='custoInicial']");
  this.dom.custoAdicional = this.dom.linha.querySelector("[name='custoAdicional']");
  this.dom.custoTotal = this.dom.linha.querySelector("[name='custoTotal']");
  destinosTBody.appendChild(this.dom.linha);

  this.dom.qtdAdultos.addEventListener("input", function() {
    that.onQuantidadeInput();
  })

  this.dom.destino.addEventListener("change", function() {
    that.onDestinoChange();
  })
}

Object.defineProperty(Destino.prototype, "qtdAdultos", {
  get: function() {
    var qtd = this.dom.qtdAdultos.valueAsNumber;
    var min = this.dom.qtdAdultos.min;
    var max = this.dom.qtdAdultos.max;
    if (qtd && qtd >= min && qtd <= max) {
      return qtd;
    } else {
      return 0;
    }
  },
  set: function(value) {
    this.dom.qtdAdultos.value = value;
  }
})

Object.defineProperty(Destino.prototype, "destino", {
  get: function() {
    var option = this.dom.destino.options[this.dom.destino.selectedIndex];
    return option.innerHTML;
  }
})

Object.defineProperty(Destino.prototype, "custoInicial", {
  get: function() {
    if (this.dom.destino.selectedIndex == 0)
      return 0;
    var option = this.dom.destino.options[this.dom.destino.selectedIndex];
    return parseInt(option.dataset.custoIni);
  }
})

Object.defineProperty(Destino.prototype, "custoAdicional",...