<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script src="https://cdn.ckeditor.com/4.7.1/standard/ckeditor.js"></script>
<script language="javascript" type="text/jscript">
    // Run your custom code when the DOM is ready.
    $(document).ready(function () {

        // Specify the unique ID of the DOM element where the
        // picker will render.
        initializePeoplePicker('peoplePickerDivTo');
        initializePeoplePicker('peoplePickerDivCC');
    });

    // Render and initialize the client-side People Picker.
    function initializePeoplePicker(peoplePickerElementId) {

        // Create a schema to store picker properties, and set the properties.
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = true;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '600px';

        // Render and initialize the picker.
        // Pass the ID of the DOM element that contains the picker, an array of initial
        // PickerEntity objects to set the picker value, and a schema that defines
        // picker properties.
        this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
    }

    function getuserID(peoplePickerElementId) {
        var peoplePickerTo = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDivTo_TopSpan;
        var peoplePickerCC = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDivCC_TopSpan;
        // Get user keys.
        keys = peoplePickerTo.GetAllUserKeys();
        cc = peoplePickerCC.GetAllUserKeys();
    }

    function submitReply() {
        var ctx = new SP.ClientContext.get_current();
        var discussionItem = ctx.CurrentItem;
        var body = CKEDITOR.instances['commentArea'].getData();

        var messageProperties = {'Body': body};
        createMessage(discussionItem,messageProperties,
            function(){
                console.log('Reply has been post successfully');
            },
            function(sender,args){
                 console.log('Error occurred while posting a reply:' + args.get_message());
            }
        );
    }

    function createMessage(discussionItem,properties,OnItemAdded,OnItemError)
    {
        var context = new SP.ClientContext.get_current();
        var messageItem = SP.Utilities.Utility.createNewDiscussionReply(context, discussionItem);
        for(var propName in properties) {
           messageItem.set_item(propName, properties[propName])
        }
        messageItem.update();
        context.executeQueryAsync(
            function() {
              OnItemAdded(messageItem);
            },
            OnItemError
        );
    }

</script>

<div>
    <table style = "width:100%">
        <tr>
            <td style="text-align:left; width:3%">TO</td>
            <td style="text-align:left; width:97%"><div id ="peoplePickerDivTo" style ="display:inline-block;"></div></td>
        </tr>
        <tr>
            <td style="text-align:left; width:3%">CC</td>
            <td style="text-align:left; width:97%"><div id ="peoplePickerDivCC" style ="display:inline-block;"></div></td>
        </tr>
    </table>
<br>
    <p>
        <textarea id="commentArea" name="commentArea" style="width:600px; height:100px;"></textarea>
        <script>
            CKEDITOR.replace('commentArea');
        </script>
    </p>
    Attach any relevant files
    <div class="files" id="attachFilesContainer">
    <table style="width:100%">
        <tr>
            <td style="text-align:left; vertical-align:top; width:70%">
                <input id="infringementFiles" type="file" class="multi" multiple = "multiple" style="width:600px"/></td>
            <td style="text-align:right; vertical-align:top; width:30%">
                <input class="btn" id="btnSend" value="Send" type="button" onclick="SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {submitReply();});"/></td>
        </tr>
    </table>
    </div>
</div>