JSFiddle - React, Tailwind, and code Playground

HTML

<input type= "text" id="tbox" />
<input type="button" class="btn btn-danger" id="btn" value="add buttons" />

	<div id="container"></div>

JavaScript

$('#btn').on('click',function(){
    if( $('#tbox').val()!=""){
var tboxValue=$('#tbox').val();
 var btn = $('<button type="button"  class="btn" data-value="'+tboxValue+'">'+tboxValue+' OFF</button>');
$(btn).appendTo('#container');
  $('#tbox').val('');
    }
})




$("#container").on('click','.btn',function(){
  var innerHtml=$(this).attr('data-value');
	if($(this).hasClass('active')){	
	 $(this).html(innerHtml+" OFF");
	 $(this).removeClass('active');
	} else{
	$(this).html(innerHtml+" ON");
	$(this).addClass('active');
	
	}
	
});