JSFiddle - React, Tailwind, and code Playground

by David Gnanasekaran C

HTML

<div class="row">
  <div class="col-md-2">
    <label>First Name:</label>
  </div>
  <div class="col-md-10">
    <input type="text" value="" class="FINDME" placeholder="First Name" />
  </div>
</div>

<div class="row">
  <label>Middle Name:</label>
  <input type="text" value="" class="FINDME" placeholder="Middle Name" />
</div>

<div class="row">
  <div class="col-md-2">
    <label>Last Name:</label>
  </div>
  <div class="col-md-10">
    <input type="text" value="" class="FINDME" placeholder="Last Name" />
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <label>Gender:</label>
    <br>
    <div class="FINDME">
      <input type="radio" name="gender" value="male"> Male
      <br>
      <input type="radio" name="gender" value="female"> Female
      <br>
      <input type="radio" name="gender" value="alien"> Alien
    </div>
  </div>
  <div class="col-md-6">
    <label>Food:</label>
    <div class="FINDME">
      <input type="checkbox" name="option1" value="Milk"> Milk
      <br>
      <input type="checkbox" name="option2" value="Butter"> Butter
      <br>
      <input type="checkbox" name="option3" value="Cheese"> Cheese
      <br>
    </div>
  </div>
</div>

CSS

.row {
  margin-top: 10px;
  width: 100%;
}

.row .col-md-2 {
  float: left;
  width: 16.66666666666667%;
}

.row .col-md-6 {
  float: left;
  width: 50%;
}

.row .col-md-10 {
  float: left;
  width: 83.33333333333333%;
}

JavaScript

// comment out either one to see the difference:
//$(".FINDME").siblings("label").prepend("<span style='color: magenta;'>* </span>");
//$(".FINDME").closest(".row").find("label").append("<span style='color: magenta;'> *</span>");

$("input.FINDME").each(function(idx, obj) {
  var $obj = $(obj);
  var parent = $obj;
  var depth = 5, // You can define till which depth you can test for nearest label
    currentDepth = 0;
  while (true) {
    parent = parent.parent();
    currentDepth++;
    if (!parent || currentDepth == depth)
      break;
    var labels = parent.find("label");
    if (labels.length > 0) {
      var myLabel = $(labels[0]);
      if (myLabel.find(".star").length == 0)
        myLabel.prepend("<span class='star' style='color: magenta;'>* </span>");
      break;
    }
  }
});