JSFiddle - React, Tailwind, and code Playground
HTML
<div class="col-sm-3" style="margin-bottom:20px;">
<h5>Fecha labrada</h5>
<select id="report-acta-lista_todas_actas-filter-type-fecha" name="report-acta-lista_todas_actas-filter-type-fecha" class="form-control input-xs" data-has-between="yes">
<option value="1">
igual a </option>
<option value="2">
distinto a </option>
<option value="8">
entre </option>
<option value="9">
antes de </option>
...
JavaScript
$(':input').each(function() {
if ($(this).attr('id').indexOf('filter-type') !== -1 ) {
if (typeof $(this).attr('data-has-between') !== 'undefined'
&& $(this).attr('data-has-between') === 'yes') {
$(this).unbind();
$(this).change(function () {
if ($(this).find(':selected').attr('value') == 8) {
console.log('Show extra input text');
var $input = $(this).next();
$input.clone().addClass('last').insertAfter($(this).next())
} else {
console.log('Remove extra input text');
console.log($(this).closest('.col-sm-3').find('.last'));
$(this).closest('.col-sm-3').find('.last').remove();
}
});
}
}
});