JSFiddle - React, Tailwind, and code Playground

by surendra786

HTML

<div class="test1">
      		
      			<input type="text" class="reset actor_input" name="actor" value="add actors"></input>
      			
      			<input type="text" name="actors"></input>
      			
      			<div class="found_actors"></div>
      			
      			<div id="add" class="button_content">ADD</div>
      			
      			<div id="undo" class="button_content">UNDO</div>
      			
      			<div class="actors_list"><textarea readonly style="resize: none;" rows="20" cols="20" name="actors-list"></textarea></div>
      		
      		</div>

JavaScript

var items = [];
			
$("#add").click(function() {
    // Push the new actor in the array
    items.push($("[name='actor']").val());
    populate();
});
			


$(document).keydown(function(e){
       if( e.which === 90 && e.ctrlKey ){
         console.log('control + z'); 
         if (items.length > 0) {
        // remove last element of the array
        items.splice(-1,1);
        populate();
    }
      }          
}); 

populate = function() {
    $("[name='actors-list']").text('');
    $("[name='actors-list']").append(items.join('&#13;&#10;'));
    $("[name='actors']").val(items.join(','));   
}