javaweb表单多选按钮生成徽章

在表格中已bootstrap中徽章的形式显示多选按钮

表单部分：

<form>
	<input type="hidden" name="type" id="type" value="add">
	<div class="form-group">
		<label for="">编号</label> <input type="text" class="form-control"
		 id="id" name="id" required placeholder="">
	</div>
	<div class="form-group">
		<label for="">姓名</label> <input type="text" class="form-control"
		name="username" id="username" required placeholder="">
	</div>
	<div class="form-group  ">
		<label for="">部门</label>
		 <select class="dept form-control" id="dept" name="dept">
		</select>
	</div>
	<div class="form-group">
		<label for="">性别</label>
		<div id="sex" class="sex col"></div>
	</div>
	<div class="form-group">
		label for="">入职日期</label> <input type="date" 
		class="form-control" id="startdate" name="startdate">
	</div>
	<div class="form-group">
		<label for="">专业技能</label>
		<div id="skill" class="skill form-check"></div>
	</div>
	<button type="button" id="save" class="btn btn-block btn-success">保存</button>
</form>

js部分：

function loadData(){
	$.get('person',{type:'list'},(data)=>{
		let tr='';
		$.each(data,(i,item)=>{
			let dname='不详';
			if(item.dept.dept_name!=null){
				dname=item.dept.dept_name;
			}
			//多选框的字段
			let span='';
			$.each(item.skill,(i,items)=>{
				span+=`
				${items.skill_name}
				`
			})
			tr+=`
				
					${item.id}
					${item.username}
					${dname}
					${item.sex.sex_name}
					${item.startdate}
					${span}
					
						${item.id}>修改
						${item.id}">删除
					
				
				
				`
				$('tbody').html(tr);
		})
		
	},'json')
}

效果图：