How to create customized Add Comment in Word-Addins Taskpane?

Question

I am creating an MS-Word Add-ins for Word for mac and I have to create a custom comment section with a task pane so I have created one textbox and create a button on click on button comment is added to that selected text.

I find many articles but don't work for me so that I attach a sample code below.

HTML File

    <div class="padding">
            <textarea id="areaDiv"></textarea>
            <button id="addComment">Add Comment</button>
            <div id="errorDiv"></div>
     </div>

**JS File**
Office.onReady(function () {
    // Office is ready
    $(document).ready(function () {
        // The document is ready
        // Use this to check whether the API is supported in the Word client.
        if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
            // Do something that is only available via the new APIs
            $('#addComment').click(addComment);

            $('#supportedVersion').html('This code is using Word 2016 or later.');
        }
        else {
            // Just letting you know that this code will not work with your version of Word.
            $('#supportedVersion').html('This code requires Word 2016 or later.');
        }
    });
});


// Function that writes to a div with id='message' on the page.

function addComment() {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
        { valueFormat: "unformatted", filterType: "all" },
        function (asyncResult) {
            var error = asyncResult.error;
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                write('');
            }
            else {
                var range = asyncResult.value;
                write(range);
            }
        });
}
function onError(error) {
    $('#errorDiv').text(error.name + ' ' + error.code + ': ' + error.message);
}
function write(range) {
    $('#errorDiv').text(range);
    var text = $("#areaDiv").val();
    if (range != null && range != "" && text != null && text != "") {
        $('#errorDiv').text(range + " " + text);
        var document = Office.context.document.properties.comments;
        document.add(range, text);
        $("#areaDiv").val("");
    }
}

Here there is no error but there is an issue of no comment is set the selected text and not goes in the catch block.

If anyone has an idea about this then it helps me a lot.