JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group" data-toggle="buttons" id="genreButtons">
     <label for="genre2" class="btn btn-default">Button 1<input data-value="2" name="genre2" id="genre2" type="checkbox"></label>
     <label for="genre4" class="btn btn-default">Button 2<input data-value="4" name="genre4" id="genre4" type="checkbox"></label>
     <label for="genre5" class="btn btn-default">Button 3<input data-value="5" name="genre5" id="genre5" type="checkbox"></label>
     <label for="genre7" class="btn btn-default">Button 4<input data-value="7" name="genre7" id="genre7" type="checkbox"></label>
</div>
         
<input type="hidden" name="valueGenre" value="">
    <div id="debug"></div>

CSS

.btn-group .btn-default {
    display:block;
    margin:4px 0;
}

JavaScript

$('#genreButtons').find('input').on('change', function() {
    var val = [];
    $('#genreButtons').find('input:checked').each(function() {
        val.push($(this).data('value'));
    });
    $('input[name="valueGenre"]').val(val.join(','));
   	$('#debug').html(val.join(','));
});