How to print text from the same input, dynamically generated multiple times with Jquery and Flask-CodePudding

I’m developing an application with Jquery and Flask that generates inputs of type text dynamically by clicking on a respective radio button, then the application must capture the text of each input and print it at the bottom of the screen. When I generate only one input from one radio button with a "name" set as follows, the application works perfectly:

$('#Entradas').append('<input type="text" id="name2" name="message1" placeholder="Ingresa tu mensaje">')

But because I can generate several inputs from the same radio button, I need somehow the parameter "name" be variable or auto-increment each time the input is generated with the radio button so that when processed by the code in Flask it can print the texts of all the input that have been generated. With the following code, I generate two types of inputs, the first with the variable name and the second with the fixed name, the input with the fixed name prints it perfectly but two inputs with the variable name prints them as "None".

HTML-Javascript (InsertarFlask3.html)

<script type=text/javascript>
            
        var i=0;
    
    $(document).ready(function(){
                
        $("#der-iz").click(function(){
            
            var i = i 1;

             $('#Entradas').append('<textarea type="text" id="name" name= "(i)" placeholder="Type 
             your message">');   //Input with name variable. It does not work.

             $('#Entradas').append("<br>");  

        })

        $("#ab-ar").click(function(){
             $('#Entradas').append('<input type="text" id="name2" name="message2" 
             placeholder="Type your message">');  //Input with name fixed. It works.

             $('#Entradas').append("<br>");
            
            
        })

        $(function() {
              $('a#process_input').bind('click', function() {
                $.getJSON('/background_process', {
                  mess1: $('textarea[name="1"]').val(),
                  mess2: $('textarea[name="2"]').val(),
                  message2: $('input[name="message2"]').val()
                }, function(data) {
                  $("#result").text(data.result);
                  $("#result").append("<br>");
                  $("#result").append(data.result1);
                  $("#result").append("<br>");
                  $("#result").append(data.result2);
                });
                return false;
              });
            });
        
        
    });
    </script>

    <body>

       <form>
    
    <div id="Entradas">
        
    </div>
        
        <br>
        
        <a href=# id=process_input><button class='btn btn-default'>Send</button></a>
        
    </form>
                    
    <p>
                <label>
                
                <input type="radio" name="filaint" id="der-iz" value="der-iz" >Right-Left</label>
                
                
                <label>
                    
                <input type="radio" name="filaint" id="ab-ar" value="ab-ar" >Down-Up</label>
    
    </p>
    
    <br>
    
    <div id=result>
    
    </div>

</body>

Flask

@app.route("/")
def index():

    return render_template("InsertarFlask3.html")

@app.route("/background_process")
def background_process():
    

    lang = str(request.args.get('mess1'))
    lang1 = str(request.args.get('mess2'))
    lang2 = str(request.args.get('message2'))
    
    return jsonify({'result':lang, 'result1':lang1, 'result2':lang2})

The text of inputs generated by radio button "der-iz" is printed as None, and the only text generated by radio button "ab-ar" is printed correctly.

I appreciate you help me to correct this implementation.

CodePudding user response：

I haven't used jQuery but i would solve this in plain JS first creating the element, then changing the id to your dynamically generated, then appending it the the parent, as follows:

$("#der-iz").click(function(){

  let ta = document.createElement("textarea");
  ta.name = "maybesomethingdescriptive" i.toString();
  //rest of attributes
  ta.classList.add("control-class") // with this you can query later over an indeterminated number of elements
  document.getElementById("Entradas").appendChild(ta);
  i  ;
}

I believe you can do it in straight in JQuery, but i can't provide that solution

adding the class you can iterate over all the elements without knowing how many of them are, or their names, with document.querySelectorAll(".control-class")