JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">

  <input type="text" name="tags" id="workDesignTags">

  <label>
    <input type="checkbox" name="design" value="Value 1"><span class="textBox">Value 1</span>
  </label>
  <label>
    <input type="checkbox" name="design" value="Value 2"><span class="textBox">Value 2</span>
  </label>
  <label>
    <input type="checkbox" name="design" value="Value 3"><span class="textBox">Value 3</span>
  </label>
  <label>
    <input type="checkbox" name="design" value="Value 4"><span class="textBox">Value 4</span>
  </label>
</div>

JavaScript

var inputText = "";

$("#workDesign label").on("click", function() {
  var input = $(this).children("input");
  var tag = $(this).text();
  if (input.prop("checked")) {
    inputText += tag;
    input.parent().addClass("selected");
    alert(tag);
    $("#workDesignTags").val(inputText);
  } else {
    inputText = inputText.replace(tag, "");
    $("#workDesignTags").val(inputText);
    input.parent().removeClass("selected");
  }
});