JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<div class="section group span_small_pad_top" style="overflow: visible;">
    <div class="col span_small">	<sup class="defaultRed">*</sup> Issue:</div>
    <div class="col span_large span_small_pad_left">
        <select name="ctl00$BodyPlaceHolder$ddlTechIssues" id="ddlTechIssues" class="chosen-select setProvDDStyle htLeft">
            <option value="Select an Issue">Select an Issue</option>
            <option value="Access">Access</option>
            <option value="Fam">Fam</option>
        </select>
    </div>
</div>
<div class="section group span_small_pad_top">
    <div class="col span_small vertAlignT">Comments:</div>
    <div class="col span_large span_small_pad_left">
        <textarea name="ctl00$BodyPlaceHolder$tbComments" rows="15" cols="30" id="tbComments" class="tbTech htLeft"></textarea>
    </div>
</div>

CSS

.setNormal {
    font-weight: normal;
}
.setBold {
    font-weight: bold;
}

JavaScript

$(document).ready(function () {

    $(".chosen-select").chosen();

    $("body").on("focusin", ".htLeft,:has(.htLeft)", function (e) {
        //alert(this);
        $(this).closest(".section").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
    });
    $("body").on("focusout", ".htLeft,:has(.htLeft)", function (e) {
        $(this).closest(".section").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
    });
});