JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<form  method="post" action="bp-rule-define.php"/>
<div id="global">
	<div class="input-group">
		<span class="input-group-addon">Choisissez votre hôte</span>
    	<select class="form-control" name="hostnameav">
	    	<option disabled="" selected="">--</option>
        	        		<option class="opt" value='admin-pc'  required="">admin-pc</option>
        	        		<option class="opt" value='apollo3'  required="">apollo3</option>
        	        		<option class="opt" value='Cluster-IP3G'  required="">Cluster-IP3G</option>
        	        		<option class="opt" value='DELL726C6A'  required="">DELL726C6A</option>
        	        		<option class="opt" value='exchange-ip3g'  required="">exchange-ip3g</option>
        	        		<option class="opt" value='gitlab'  required="">gitlab</option>
        	        		<option class="opt" value='glpi-ip3g'  required="">glpi-ip3g</option>
        	        		<option class="opt" value='ip3g-vcenter'  required="">ip3g-vcenter</option>
        	        		<option class="opt" value='ip3grammes'  required="">ip3grammes</option>
        	        		<option class="opt" value='kyocera'  required="">kyocera</option>
        	        		<option class="opt" value='lync-ip3g'  required="">lync-ip3g</option>
        	        		<option class="opt" value='san_ip3g'  required="">san_ip3g</option>
        	        		<option class="opt" value='SG300'  required="">SG300</option>
        	        		<option class="opt" value='shinken'  required="">shinken</option>
        	        		<option class="opt" value='srv-supervision'  required="">srv-supervision</option>
        	        		<option class="opt" value='srv-vtiger'  required="">srv-vtiger</option>
        	        		<option class="opt" value='supervision-distant'  required="">supervision-distant</option>
        	        		<option class="opt" value='test'  required="">test</option>
        	        		<option class="opt" value='test2'  required="">test2</option>
        	        		<option...

CSS

body{
	background-color:transparent;
}

div#global{
	position:relative;
	margin-top:25px;
	width:610px;
	display:block;
	background-color:none;
/*  border: solid 1px blue; */
}
input[type="text"]#text{
	width:310px;
}
div.input-group, .btn{
	margin-top:10px;
	margin-left:20px;
 	border: solid 1px green; 
}
.input-group, .form-control{
	width:1000px;
}
.input-group-addon{
	width:220px;
}
#sub{
	float:right;
}
.selhost{
	width: 300px;
}

JavaScript

var contenu = {"admin-pc":["aix_cpu_2"],"apollo3":["aix_cpu","cluster_cpu"],"Cluster-IP3G":["aix_cpu"],"DELL726C6A":["aix_cpu"],"exchange-ip3g":["aix_cpu"],"gitlab":["aix_cpu"],"glpi-ip3g":["aix_cpu"],"ip3g-vcenter":["aix_cpu"],"ip3grammes":["aix_cpu"],"kyocera":["aix_mem"],"lync-ip3g":["rgrgrgg","cpu"],"san_ip3g":["rgrgrgg"],"SG300":["z"],"shinken":["aix_cpu","che_oracle_sga_library_cache_g","aix_mem","aix_net"],"srv-supervision":["aix_cpu"],"srv-vtiger":["aix_cpu","aix_mem"],"supervision-distant":["aix_cpu"],"test":["host_alive"],"test2":["aix_disks","aix_vg"],"testveeam6-5":["aix_cpu","aix_mem"]};
console.log(contenu);

var $tab = new Array();
var $j = 0;
    
var enleverservice = function(id){
	console.log(id);
	if(($("#grp1 .service:last").length !== 0) & (id !== 'ser1')){
			$("#grp1 .service:last").remove();
	}
	else{
		console.log("Il existe!");
	}
};

var enlevergroup = function(id){
	console.log(id);
};


var ajoutgroup = function(){

	$tab[$j] = 0;

	if ($("#removegrp").length === 0){

		var $removegrp = $('<input />').attr({ type: 'button', id: 'removegrp'}).val('-').addClass('btn')
			.on('click', enlevergroup($('.group:last').attr('id')));
	
		$("#addgrp").after($removegrp);
	}
	
	var $grp = $("<div />").attr({id: 'grp'+$j}).addClass('input-group group').css({"width":"100%"});
	$grp.appendTo("#bprule");
	console.log('grp'+$j);

	var $addser = $('<input />').attr({ type: 'button', id: 'addser'+$j}).val('+').addClass('btn')
	.on('click', function() { $tab[$j] = ajoutservice($tab[$j]); });
	$addser.appendTo("#grp"+$j);

	var $removeser = $('<input />').attr({ type: 'button', id: 'removeser'+$j}).val('-').addClass('btn')
	.on('click', function() { enleverservice($('.service:last').attr('id')); });
	$removeser.appendTo("#grp"+$j);

	$('#addser'+$j).click();
	++$j;
	console.log('J : '+$j);
	console.log('Tab : '+$tab);
}

var ajoutservice = function($i){

	if($("#ser"+$i).length === 0){

		console.log('I : '+$i);
		
		var $ser = $("<div />").attr({id:...