Draggable not working with P element and using document.createElement

Question

First, I am using document.createElement to append a "p" element. Then it is dragging. When I append another one the current "p" is missing. Also, it is not appending inside the as told.Atleast I don't think that it is going inside the div element. I am also getting an error message saying onMousedown is not working.Please help me. Thank you in advance

function addtext(){
    var files= document.getElementById('texttouse').value;
    let textadder=document.createElement("p");
    textadder.style.fontFamily = document.getElementById('fontfortext').value;
    textadder.style.fontSize = document.getElementById('sizefortext').value;
    textadder.style.color = document.getElementById('colorfortext').value;
    textadder.style.position = "absolute";
    textadder.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        textadder.offsetLeft - e.clientX,
        textadder.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        textadder.style.left = (mousePosition.x + offset[0]) + 'px';
        textadder.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
    //bold text
if(document.getElementById('bold').checked){
    textadder.style.fontWeight = "bold";
}
//underline text
if(document.getElementById('Und').checked){
    textadder.style.textDecoration = "underline";
}
//italic text
if(document.getElementById('italic').checked){
    textadder.style.fontStyle = "Italic";
}
//strike Strikethrough
if(document.getElementById('strike').checked){
    textadder.style.textDecoration = "line-through";
}
//turning text
var degrees =document.getElementById('turning_text').value;
var equation= "rotate("+degrees+"deg)";
textadder.style.transform =equation;

      let t= document.createTextNode(files);
 textadder.appendChild(t);
   document.getElementById('gallery').appendChild(textadder);
     for (i = 0 ; i < textadder.length; i++) {
    textaddder[i].onclick = function() {
      var div = this.parentElement;
     
    }
  }             
  
}

<textarea class="form-control" id="texttouse"></textarea>
<input type="checkbox" value="Bold" id="bold" name="bold"><label for="bold">Bold</label>
<input type="checkbox" value="Und" id="Und" name="und"><label for="und">Underline</label>
<input type="checkbox" value="italic" id="italic" name="italic"><label for="italic">Italic</label>
<input type="checkbox" value="strike" id="strike" name="strike"><label for="strike">Strikethrough</label><br>
<select id="fontfortext">
    <option value="Arial">Arial</option>
    <option value="Comic Sans MS">Comic Sans MS</option>
    <option value="Courier New">Courier New</option>
    <option value="Times New Roman">Times New Roman</option>
</select>
<select id="sizefortext">
    <option value="12px">12</option>
    <option value="24px">24</option>
    <option value="36px">36</option>
    <option value="48px">48</option>
</select><input type="color" id="colorfortext" value="#ff0000"><label for="colorfortext">Font Color</label><br>
<u>Rotation</u>
 <div class="input-group mb-3"><input type="number" id="turning_text" > <div class="input-group-append"><span class="input-group-text">degrees</span></div></div>
        </div>
        <div id="gallery"> </div>
          <button onclick="addtext()" class="btn btn-primary">Add text</button>