JSFiddle - React, Tailwind, and code Playground

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() { 
    alert("update");


     var allVals = [];
     $('.checkbox-flavor :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#checkbox-flavors').val(allVals);
  }


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