How to get value of textarea that has been dynamically added?

How to get value of textarea that has been dynamically added?

Have the following code that adds textarea along with two buttons to publish a reply for blog comment

        $("#"+this.id.split("+")[0]+" .commentContent").append("<div class=\"publishReply\">\n" +
            "    <div class=\"publishReplyContent\"><textarea class=\"publishReplyTxt\" id='"+this.id.split("+")[0]+"+RT"+"'></textarea></div>\n" +
            "    <div class=\"publishReplyBtn\"><input class='publishReplyBtn' type=\"button\" value=\"Publish\" id='"+this.id.split("+")[0]+"+PR"+"'/><input class='publishReplyCancelBtn' type=\"button\" value=\"Cancel\" id='"+this.id.split("+")[0]+"+CR"+"'/></div>\n" +
            "</div>");

The following code is used to get the value of textarea

    $(document).on("click", ".publishReplyBtn", function () {
        console.log($('#'+this.id.split("+")[0]+'+RT').val());
    });

It prints undefined.