add a button below textarea in powerportals using jquery

I was wondering if there is away to add a button below a textarea using jquery. I have generated html like below in power portals page.

<textarea rows="7" cols="20" maxlength="2000" id="description" class="textarea form-control "></textarea>

I would like to add a button just below it. I am using the code below but it is not displaying the button at all.

$(document).ready(function () {
$("#description").append("<button type='button' id='btnSave' class='btn' 
style='color:#fff;background-color:#36f;border-color:36f;' 
onclick='savefunction'>Save</button><br><br>");
});

You cannot put html inside textarea, you can only put text inside it. If you want to display a button within a text area, you can try appending the button on the parent of text area. and position the button accordingly.

$(document).ready(function () {
$("#textwrapper").append("<button onclick='savefunction' id='btnSave' type='button' style='color: #fff; background: #36f; border-color:#36f; display:block; margin-left:auto;'>Save</button><br><br>");
});

* {
  box-sizing: border-box;
}
.textarea-wrapper {
  position: relative; 
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="textwrapper" class="textarea-wrapper">
<textarea rows="7" cols="20" maxlength="2000" id="description" class="textarea form-control "></textarea>
</div>