const options = [ 'first', 'second', 'third', 'fourth' ];
const $table = $('table');
$('button').click(function() {
$table.append(`
<tr>
<td>
<select>
<option disabled selected>-</option>
${options.map(n => `<option>${n}</option>`).join('')}
</select>
</td>
<td>
<button class="del">del</button>
</td>
</tr>
`);
updateDisabled();
});
$table
.change(updateDisabled)
.on('click', '.del', function() {
$(this).closest('tr').remove();
updateDisabled();
});
function updateDisabled() {
const $select = $table.find('select');
const selectedOptions = $select.get().map(n => n.value);
$select.find('option').prop('disabled', function() {
return selectedOptions.includes(this.value);
});
}