JSFiddle - React, Tailwind, and code Playground

HTML

<form method="get" id="myForm" action="">
    <input type="checkbox" id="bannanasChk" name="bannanasChk" value="N">
    <label for="bannanasChk" class="light">Bannanas</label>

    <input type="checkbox" id="carChk" name="carChk" value="N">
    <label for="carChk" class="light">Car Monkeys</label>
    
    <input type="checkbox" id="apesChk" name="apesChk" value="N">
    <label for="apesChk" class="light">Apes</label>
    
    <input type="checkbox" id="repairChk" name="repairChk" value="N">
    <label for="repairChk" class="light">Car Repair</label>

    <input type="submit" value="Submit" />
</form>
<div id="additionalServices"></div>

CSS

.aditionalServices{
  display: block;
  position: relative;
  width: 200px;
  height: 100px;
  background-color: red;
}

JavaScript

/*when a user selects interest in an addtional service, add this to the additionalServices div*/
$('input[type="checkbox"]').bind('change', function() {
    var alsoInterested = '';
    $('input[type="checkbox"]').each(function(index, value) {
        if (this.checked) {
            /*add*/ /*get label text associated with checkbox*/
            alsoInterested += ($('label[for="'+this.name+'"]').html() + ', ');
        }
    });
    
    
    $('#additionalServices').html(alsoInterested);
    //console.log($('#additionalServices').html());
});