JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
    <label for="name">Name:</label>
  
    <input type="text" name="name" id="name" value="[[!+fi.name]]">
    <br>
    <label for="email">Email</label>
      
    <input type="text" name="email" id="email" value="[[!+fi.email]]">
    <br>
 
<label>Address Emails To [[!+fi.error.addressTo]]</label>
        <input type="hidden" name="addressTo[]" value="" />
        <input type="checkbox" name="addressTo[]" value="andy@validdomain.co.uk" [[!+fi.addressTo:FormItIsChecked=`andy@validdomain.co.uk`]] > Andy
        <input type="checkbox" name="addressTo[]" value="info@validdomain.co.uk" [[!+fi.addressTo:FormItIsChecked=`info@validdomain.co.uk`]] > Info
    <hr>
    <label for="name">Email list</label>
    <textarea cols="50" rows="4" id="addressto_all" name="addressto_all" class="hidden"></textarea>    
            
<input type="submit" value="Submit">
  
</form>

CSS

body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }

JavaScript

function showValues() {
       var fields = $(":checkbox").serializeArray();
       var tokens = jQuery.map(fields, function(field) {
               return (field.value) ? (field.value) : null;
           });
       $("#addressto_all").val(tokens.join(','));
   }
  
  $(":checkbox").click(showValues); 
  showValues();