JSFiddle - React, Tailwind, and code Playground

by DelightedD0D

HTML

<table class="centerNotes" id="centerNotes" width="101%" border="0" cellpadding="5">
		<tr>
			<td><textarea  class="trans" id='trans' name='trans' cols="46"rows='8'></textarea></td>
        </tr>
    </table>

<input type="button" id="addTrans" value="Press Me"/>

JavaScript

var curTransCount = 1;


$(function(){   

// Only the first textarea responds      
$('.trans').keyup(function() {
    alert("Working");
  
});    
    

// I also tried this   
// Neither textarea responds if this is uncommented     
// $('.trans').on('keyup', '.newTrans', function() {
//    alert("Working");
// }); 

    
// I also tried this 
// Only the first textarea responds    
// $('.trans').delegate('.newTrans', 'keyup', function(){
//    alert("Working");
// });


$('#addTrans').click(function() {
  // get the current number of tans panels, add one, assign as id for new panel	
  curTransCount ++;	
  var newTrans = "trans"+curTransCount; 
  var table =document.getElementById('centerNotes');
  
  var row2 = document.createElement('tr');
	  table.appendChild(row2);
	  			
			var col = document.createElement('td');
				row2.appendChild(col);
				
				var textarea = document.createElement('textarea');
                    textarea.setAttribute("class","trans");
                    // textarea.setAttribute("class","newTrans"); 
                    // This was for when I tried the second ways above 
                    textarea.setAttribute("id",newTrans);
					textarea.setAttribute("name",newTrans);
					textarea.setAttribute('cols', '46');
					textarea.setAttribute('rows', '8');
					col.appendChild(textarea);
				
});				

  
});