How to make button change text items on the stage aframe?

There are forms of adding text to the aframe. How to make buttons that will change their positions on the scene?

For example, there will be 2 buttons that change the position of the text in a circle or in a single line. There is a small code "position", but I do not know how to add it and connect it to < / a-entity>

var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );



function createTextArea(wrapper) {
  const newTextArea = $(`
    <div>
      <textarea type="text" value="text" name="fname" class="inputText" cols="20" rows="3"></textarea>
      <input class="sendButton" type="submit" value="Отправить" />
    </div>
  `);
  wrapper.append(newTextArea);
  const inputText = newTextArea.find(".inputText");
  const sendButton = newTextArea.find(".sendButton");

  var aframeWrapper = document.getElementById("text-container");
  const index = aframeWrapper.children.length;
  var position = new THREE.Vector3(index * -1.1, 0, 0);
  var newText = document.createElement("a-entity");
  newText.setAttribute("position", position);
  newText.setAttribute("text", {
    color: "white",
    align: "center",
    value: `output${index}`
  });
  aframeWrapper.appendChild(newText);

  sendButton.click(e => {
    e.preventDefault();
    newText.setAttribute("text", "value", inputText.val());
  });
}

$(document).ready(function() {
  var wrapper = $(".container1");
  var max_fields = 10;
  var add_button = $(".add_form_field");

  // create initial text area
  createTextArea(wrapper);

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      createTextArea(wrapper);
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

form {
  position: absolute;
  z-index: 1;
  background: white;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>


<div class="container1">
  <form name="myForm" href="" onsubmit="text1" height="440">
    <div class="container1">
      <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:4px; font-weight:bold;">+</span></button>
      <div><input type="text" name="mytext[]" /></div>
    </div>
  </form>
</div>


<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5"></a-entity>
  <a-camera position="0 1.6 1"></a-camera>
</a-scene>