Organizing Forms Using Fieldsets
It's better to use fieldsets to organize your for sections because the markup is more readable. You can also style these elements however you like.
HTML
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<form>
<fieldset class="parentJob7788" id="" style="border:1px solid #ccc;background:">
<div>
<div data-row-span="3">
<div data-field-span="1"><strong>
<a href="" target="_blank"> CN7788
</a>
</strong>
</div>
<div data-field-span="1"><strong>C R MacDonald Ltd</strong></div>
<div data-field-span="1"><strong>Chipping Norton</strong>
<a id="parentLevelJob7788" class="pull-right expand-job">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="childLevelJob7788">
<div data-row-span="2">
<div data-field-span="1" style="height: 41px;"><span>Standard Paver</span></div>
<div data-field-span="1">
<span>
<input type="hidden" name="job_id[]" value="7788">
<input type="hidden" name="job_details_id[]" value="8031">
<input type="hidden" name="asset_id[]" value="14">
<input type="hidden" name="asset_types_id[]" class="employee-drops">
<input type="hidden" name="alloted_id[]" class="allocatedID8031" value="3948">
<select class="form-control employee-dropdown" id="empdropdown8031">
<option value="">--Select --</option>
<option data-type="assetType38" value="38">PA24 (Mini Paver)</option>
<option data-type="assetType39" value="39">PA25 (Mini Paver)</option>
<option data-type="assetType40" value="40">PA26 (Mini Paver)</option>
<option data-type="assetType41" value="41">PA37 (Tracked Midi Paver)</option>
<option data-type="assetType43" value="43">PA36 (Wheeled Midi Paver)</option>
<option data-type="assetType44" value="44">PA38 (Wheeled Midi Paver)</option>
<option data-type="assetType45" value="45">PA39 (Wheeled Midi Paver)</option>
<option data-type="assetType46" value="46">PA40...
CSS
body {
font: 0.8em Georgia, serif;
margin: 2.5em;
}
fieldset {
padding: 2em;
border: none;
}
fieldset > :not(legend) {
margin-left: 0.5em;
}
label {
display: block;
clear: both;
}
legend {
font-weight: bold;
font-size: 1.7em;
border-bottom: 1px solid;
width: 100%;
}
input:not([type=checkbox]) {
float: right;
margin-right: 55%;
border: 1px solid;
}
JavaScript
$('.employee-dropdown').select2();