How to add text from a form to an iframe from adding forms

Question

There is a button to add new forms, how to add text to the iframe

The first form adds text to the scene. However, the following forms, which are created at the click of a button, do not display the text How to combine two codes? File reference https://jsfiddle.net/Nickpo/q8jc1dgL/10/

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

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div><textarea type="text" value="text" name="fname" id="fname" cols="20" rows="3"></textarea></p><input id="text1" type="submit" value="Отправить"></div>'); //add input box
            }
      else
      {
      alert('You Reached the limits')
      }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
$("#text1").click(function(e) {
  var wrapper = document.getElementById("text-container");
  var position = new THREE.Vector3(wrapper.children.length * -1.1, 0, 0);
  var newText = document.createElement('a-entity')
  newText.setAttribute('position', position)
  newText.setAttribute("text", {
    "color": "white",
    "align": "center",
    "value": document.querySelector('#fname').value
  })
  wrapper.appendChild(newText)
  return false
});

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>


<form name="myForm" href="" onsubmit="text1"  height="440">

   <textarea type="text" value="text" name="fname" id="fname" cols="20" rows="3"></textarea></p>
  <input id="text1" type="submit" value="Отправить">
  <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 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>

<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5">
    <a-entity id="output" text="value: output; align: center;" position="0 0 0"></a-entity>
  </a-entity>
</a-scene>

Answer 1

Firstly, if you have multiple textareas and buttons on the page, you can't use identical ids (#text and #fname) to refer to them. You either have to give them unique ids or use class names. Also, you'll have to listen to click events on the corresponding button, not just the first one.

The cleanest way to set this up is to create both the HTML textarea and the A-Frame text output in the same function:

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>