Please Help! with JavaScript generate table

Hi,

I’m trying to generate a (unique) table from multiple text areas, and that’s actually working fine. The problem is that the Idea is to fill the 1st column from the 1st text area, the 2nd column from the 2nd text area and the same for the third one (but in the end, all the data needs to be part of the same table (only in different columns) and I just can’t figure it out. At the moment all the data from the 3 textAreas appears one below the other.

So far that’s my script:

<script>
function generateTable() {
 
    $('textarea').each(function(){
 
      var data = $(this).val(); console.log(data);
      var rows = data.split("\n");
      var table = $('<table />');
 
        for(var y in rows) {
            var cells = rows[y].split("\t");
            var row = $('<tr />');
            for(var x in cells) {
                row.append('<td>'+cells[x]+'</td>');
            }
            table.append(row);
        }
        $('#excel_table1').append(table);
    })
 
}    
    </script>

That’s my “body” with the text areas in divs:

<div id=ref>   <p>ref:</p>
    <textarea name="excel_data1" style="width:100px;height:20px;"></textarea> 
             </div>
 
      <div id=number>   <p>number:</p>  
    <textarea name="excel_data2" style="width:200px;height:20px;"></textarea>
             </div>
 
      <div id=comp>   <p>(comp:)</p>  
    <textarea name="excel_data3" style="width:100px;height:20px;"></textarea>
             </div>
          <br>
    <input id=bouton1 type="button" onclick="javascript:generateTable()" value="Generate table"/>

And that’s the table generated in a different body:

<body><center>
 
    <p>Tableau:</p>
       <div id="excel_table1"></div>
 
    </center></body>

Can Anyone help? thanks in advance :slight_smile:

(sorry, I’m not an native English speaker)

Never mind, I found the anwser!
Here’s the script that takes the data from multiple textareas and put it in different columns of the same table:

<script src="jquery-3.5.0.js" type="text/javascript" charset="utf-8"></script>  
         <script>

function generateTable() {
     var n=1;
     var rows=[];
     var lng=0;
    $('textarea').each(function(){
      var data = $(this).val();
      var rowData = data.split("\n");
      rows[n] = rowData;
      lng = rowData.length;
      n++;
    })
     var table = $('<table />');
               k=0;
               while (k < lng) {
               var row = $('<tr />');
                    for(var i = 1; i < rows.length; i++) {

                    var singleRow = rows[i];

                          row.append('<td>'+singleRow[k]+'</td>')

                    }
                        table.append(row);
                k++;
              }

        $('#excel_table1').append(table);

}    
    </script>