JSFiddle - React, Tailwind, and code Playground

by Robert Rees

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="form-check">
    <label class="form-check-label" for="checkbox-one"><input name='contact[flavor]' type="checkbox" class="checkbox-flavor form-check-input" id="checkbox-one"> one</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-check">
    <label class="form-check-label" for="checkbox-two"><input name='contact[flavor]' type="checkbox" class="checkbox-flavor form-check-input" id="checkbox-two"> two</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-check">
    <label class="form-check-label" for="checkbox-three"><input name='contact[flavor]' type="checkbox" class="checkbox-flavor form-check-input" id="checkbox-three"> three</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-check">
    <label class="form-check-label" for="checkbox-four"><input name='contact[flavor]' type="checkbox" class="checkbox-flavor form-check-input" id="checkbox-four"> four</label>
  </div>
</div>

<input type="text" id="checkbox-flavors" name="contact[flavor]" value="">

JavaScript

function update_flavors() {
  var allVals = $('.checkbox-flavor:checked').map(function() {
    return $(this).val()
  }).get();
	
  $('#checkbox-flavors').val(allVals.join(', '));
}

$(document).ready(function() {
  $(".checkbox-flavor").change(update_flavors);
});