How to dynamically add a textarea with the same style as the other Textareas in the same div. Angular CLI

I want to add a textarea with a button click. This textarea should have the same style as the others in the same div. I want to add the class "note" to it which I created in my CSS file.

my-nav.component.html

<div class="square" id="notes" ng-repeat="textArea in textAreas">
  <textarea autofocus class ="note" style="font-size: 15px" placeholder="Apple"></textarea>
</div>

my-nav.component.ts

 onClickAdd() {
   const div = document.createElement("TEXTAREA");
   div.innerHTML = "CLICK ME";
   div.classList.add("note");
   document.getElementById("notes").appendChild(div);
 }

CSS

.note {
  background-image: -webkit-linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: -ms-linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: -o-linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-image: linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
  background-size: 2px 100%, 100% 24px;
  background-position: 40px top, left 0px;
  background-repeat: no-repeat, repeat;
  line-height: 24px !important;
  background-attachment: local;    
}

Currently, it looks like this: