JSFiddle - React, Tailwind, and code Playground

HTML

<div id="selectBox" onclick="showCheckboxes()">
            <select id="trainig_by_industry">
                <option value="none">Select an option</option>
            </select>
            <div class="overSelect"></div>
        </div>
<div id="subc1">
        <label for="one"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()"  value="First checkbox" />First checkbox</label>
            <label for="two"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="Second checkbox "/>Second checkbox </label>
            <label for="three"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="Third checkbox"/>Third checkbox</label>
            <label for="four"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="fourth checkbox"/>fourth checkbox</label>
            <label for="five"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="fifth checkbox"/>fifth checkbox </label>
            <label for="six"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="sixth checkbox"/>sixth checkbox</label>
            <label for="seven"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="seventh checkbox"/>seventh checkbox</label>
            <label for="eight"><input type="checkbox" class="check" name="trainig_by_industry1" onchange="show()" value="eight checkbox"/>eight checkbox </label>
            <label for="nine"><input type="checkbox" class="check" name="trainig_by_industry1" onchange=" return hello();" value="nine checkbox"/>nine checkbox</label>
        
        
        </div>

CSS

#selectBox {
        position: relative;
        width: 83%;
        border: 1px #dadada solid;
        background: #fff;
        margin-left: 3px;
        padding-left: 0px;
        height: 38px;
        background-image: url('../images/sde1.png');
        background-repeat: no-repeat;
       background-position: right;
 
    }
    
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
		#selectBox select{
	height: 38px;
	width: 100%;
	padding: 12px 0 6px 12px;
	font-size: 13px;
	color: #999;
	
	}
	  #checkboxes {
        display: none;
        height:150px;
        border: 1px #dadada solid;
        margin-left: 3px;
        background: #fff;
        width: 59.5%;
        overflow:scroll;
        position: absolute;
         background:red;
    }
    #subc1 label {
        display: block;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }



#subc1 {
        display: none;
        border: 1px #dadada solid;
        margin-left: 0px;
        margin-top:0px;
        background: #fff;
        width: 59.5%;
        float:right;
        position: absolute;
         border: 6px #dadada solid;
        
    }

JavaScript

var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById("subc1");
        
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
function show()
{
	 var checkBoxes = document.getElementsByName("trainig_by_industry1");
    document.getElementById("selectBox").innerHTML = "";
   
  for(var i=0; i < checkBoxes.length;i++)
  { 
	 
      if(checkBoxes[i].checked)
      { 
    	  
    	  var da= checkBoxes[i].value;
    	 
  	    document.getElementById("selectBox").innerHTML+=  '<span class="tagRemove"  >'+ da+ ' <img src="" alt="X" id="unc" style="height:20px; width:20px;"  onclick="$(this).parent().remove();"/></span>';
    	  
      }
    
  }
  
}