JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <div id="mydiv" class="form-group">
                    <label>User Role</label>
                        <input type="checkbox" id="inlineCheckbox1" value="ADMIN"> ADMIN
                        <input type="checkbox" id="inlineCheckbox2" value="MEMBERS"> MEMBERS
                        <input type="checkbox" id="inlineCheckbox3" value="USER"> USER
                    
                    <textarea class="form-control" name="UserRole" id="UserRole"></textarea>
                </div>

JavaScript

$(document).ready(function() {
    function updateTextArea() {
        var allVals = [];
        $('#mydiv :checked').each(function () {
            allVals.push($(this).val());
        });
        $('#UserRole').val(allVals);
    }
    $(function () {
        $('#mydiv input').click(updateTextArea);
        updateTextArea();
    });
});