JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<select name="embarque" id="embarque" style="border:0px" class="custom-select">
<option selected>Tipo de Embarque</option>
<option value="aereo">Aéreo</option>
<option value="navio">FCL</option>
<option value="navio">LCL</option>
</select><br/>
<div id=navio class="navio" style="display:none;">
<form method="POST">
<div id="espaco">
<div class="linha">
<span id="fa fa-plus" class="fa fa-plus" aria-hidden="true"></span>
<input id="ncontainer" style="border:0px" type="text" name="ncontainer" placeholder="ncontainer" class="form-control" />
<span id="fa fa-minus" class="fa fa-minus" aria-hidden="true"></span>
</div>
</div>
</form>
</div>
CSS
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#espaco {
max-height: 80px;
max-width: auto;
overflow-y: auto;
}
JavaScript
var linha = `<div class="linha">
<i class="fa fa-plus" aria-hidden="true"></i>
<input id="ncontainer" style="border:0px" type="text" name="ncontainer" placeholder="ncontainer" class="form-control" />
<i class="fa fa-minus" aria-hidden="true"></i>
</div>`;
$('#embarque').on('change', function() {
$('.navio').hide();
if (this.value == 'navio') {
$('.navio').show();
}
});
$(document).on('click', '.fa fa-plus', function() {
$(linha).appendTo('#espaco');
});
$(document).on('click', '.fa fa-minus', function() {
if( $('.linha').length <= 1 ){
return false;
}
$(this).parent().remove();
});