JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="dropdown multiple-choix">
					                                       <dt class="hida1"><span>Select</span></dt>
														   <dd><nav class="mutliSelect1"><ol>
														                                     <li><p><input type="checkbox" id="choix 1" name="choix 1" value="choix 1" /><label for="choix 1">choix 1</label></p></li>
																							 <li><p><input type="checkbox" id="choix 2" name="choix 2" value="choix 2" /><label for="choix 2">choix 2</label></p></li>
																							 <li><p><input type="checkbox" id="choix 3" name="choix 3" value="choix 3" /><label for="choix 3">choix 3</label></p></li>
																							 <li><p><input type="checkbox" id="choix 4" name="choix 4" value="choix 4" /><label for="choix 4">choix 4</label></p></li>
															</ol></nav></dd></dl>
															<p class="choix_membre"><span></span></p>
                       <dl class="dropdown multiple-choix">
					                                       <dt class="hida1"><span>Select</span></dt>
														   <dd><nav class="mutliSelect1"><ol>
														                                     <li><p><input type="checkbox" id="choix 5" name="choix 5" value="choix 5" /><label for="choix 5">choix 5</label></p></li>
																							 <li><p><input type="checkbox" id="choix 6" name="choix 6" value="choix 6" /><label for="choix 6">choix 6</label></p></li>
																							 <li><p><input type="checkbox" id="choix 7" name="choix 7" value="choix 7" /><label for="choix 7">choix 7</label></p></li>
																							 <li><p><input type="checkbox" id="choix 8" name="choix 8" value="choix 8" /><label for="choix 8">choix 8</label></p></li>
															</ol></nav></dd></dl>
															<p class="choix_membre"><span></span></p>
                       <dl class="dropdown multiple-choix">
					                                       <dt class="hida1"><span>Select</span></dt>
														   <dd><nav...

CSS

.dropdown div
	  {
	  position: absolute;
	  top:50%;
	  transform: translateY(-50%);
	  }
	  
	  a
	  {
	  color: #fff;
	  }
	  
	  .dropdown dd,.dropdown dt
	  {
	  margin: 0px;
	  padding: 0px;
	  }
	  
	  .dropdown ol
	  {
	  margin: -1px 0 0 0;
	  }
	  
	  .dropdown
	  {
	  margin-top:0;
	  display:inline-table;
	  }

	  .multiple-choix
	  {
	  margin-right:11.6em;
	  float:left;
	  }
	  .choix_membre
	  {
	  font-weight:700;
	  margin:0;
	  }
	  .mutliSelect1 p
	  {
	  margin:0;
	  }

	  .dropdown dd , .dropdown div
	  {
	  position: relative;
	  }
	  
	  .dropdown dt
	  {
	  background-color: #4F6877;
	  display: block;
	  padding: 8px 20px 5px 10px;
	  min-height: 25px;
	  cursor:pointer;
	  line-height: 24px;
	  overflow: hidden;
	  color:white;
	  border: 0;
	  width:15em;
	  }
	  
	  .dropdown  dd ol
	  {
	  background-color: #4F6877;
	  border: 0;
	  color: #fff;
	  display: none;
	  padding: 2px 17px 2px 5px;
	  width: 15em;
	  list-style: none;
	  height: auto;
	  overflow: auto;
	  }

JavaScript

//Toggle de la liste
$(document).delegate(".hida1","click",function(){
	$(".mutliSelect1 ol").not($(".mutliSelect1 ol", $(this).parent())).slideUp('500');
  $(".mutliSelect1 ol", $(this).parent()).slideToggle('500');
}); 
//Reporter valeur
$(document).delegate(".mutliSelect1 ol input[type='checkbox']","change",function(){
 
//variables
var p = $(".hida1 span", $(this).parent().parent().parent().parent().parent().parent());
var string = ' ';  
//pour chaque checkbox dont la valeur est true
$(".mutliSelect1 ol input[type='checkbox']", $(this).parent().parent().parent().parent().parent()).each(function() {
    if ($(this).is(':checked')){
     string = string + $(this).val() + ', ' ;
    }
});
 
//decoupage de la virgule
newstring = string.substring(0,string.lastIndexOf(','));
if (newstring == '') {
    newstring = 'Select';
}
p.html(newstring);
 
});