JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" data-typefiltre = "mot-clé(s)" id="mot-clé(s)" class="inputcrit"/>
<input type="text" data-typefiltre = "auteur" id="auteur" class="inputcrit"/>
<br/><br/>
<select data-typefiltre = "éditeur" id="éditeur"class="selcrit">
<option value="">Tous</option>
<option value="1">Albin Michel</option>
<option value="2">Michel Lafon</option>
<option value="3">Sonatine</option>
</select>
<select data-typefiltre = "librairie" id="librairie"class="selcrit">
<option value="">Toutes</option>
<option value="1">Fnac</option>
<option value="2">Richer</option>
<option value="3">Contact</option>
</select>
<br/><br/>
<input type="button" id="btSubmit" value="go"/>
<br/><br/>
<span id="criteres"></span>
CSS
.tagcrit {
display: inline-block;
border: 1px solid black;
padding : 5px;
margin-right: 5px;
}
JavaScript
var selects = $('.selcrit');
var inputs = $('.inputcrit');
var querysel = new Object();
var queryinp = new Object();
$("#btSubmit").click(function(){
$('#criteres').empty();
selects.each(function(){
var critere = $(this).data("typefiltre");
var value = $(this).find("option:selected").text();
querysel[critere] = value;
});
inputs.each(function(){
var critere = $(this).data("typefiltre");
var value = $(this).val();
queryinp[critere] = value;
});
var addcrit = $.extend({}, queryinp, querysel);
$.each(addcrit, function(key, element) {
if(element !='Tous' && element != 'Toutes' && element != '')
{
var afficheCriteres = ' '+key+' : '+element;
$('#criteres').append('<span class="tagcrit"data-idcrit="'+key+'">'+afficheCriteres+
'<sup class ="suppcrit" style="color: red;cursor: pointer;"> x </sup></span>');
}
});
});
$(document).on("click",".tagcrit", function() {
var idc = $(this).data("idcrit");
$("[data-typefiltre='"+idc+"']").val('');
$("[data-typefiltre='"+idc+"option[value='']").prop('selected', true);
$(this).remove();
});