JSFiddle - React, Tailwind, and code Playground

by Sajeev

HTML

<div class="form-group">
  <label>Select One</label>
  <select name="ddl" id="ddl" data-placeholder="-- Select --" class="form-control select2">
    <option value="">All</option>
    <option value="1">
      One </option>
    <option value="2">
      Two </option>
    <option value="3">
      Third </option>
    <option value="4">
      Four </option>
    <option value="5">
      Five </option>
  </select>
</div>


<div id="user367" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">steve</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers367" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="367">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user369" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">sam</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers369" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="369">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user370" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">martha</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers370" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="370">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user378" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">bonnie</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers378" class="shiftUsersClass"...

JavaScript

$(document).ready(function() {
  $('#ddl').on('change', function() {
    var selectedShift = this.value;
    //$('input:checkbox').attr('checked',false);
    //$(".shiftUsersClass").attr('checked', false);
    if (selectedShift == 1) {
      var result = [{
        "staff_id": "367"
      }, {
        "staff_id": "864"
      }];
    }
    if (selectedShift == 2) {
      var result =[{"staff_id":"370"}];
    }
    if (selectedShift == 3) {
      var result= [{"staff_id":"369"}];
    }
    if (selectedShift == 4) {
      var result= [{"staff_id":"378"}];
    }
    if (selectedShift == 5) {
      var result=[{"staff_id":"511"}];
    }

    $.each(result, function(index, res) {
      $("#shiftUsers" + res.staff_id).attr('checked', 'checked');
    });

  });
});