JSFiddle - React, Tailwind, and code Playground

by fruitcake20

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<button id="btnDelete" type="button">-</button>
<button id="btnAdd" type="button">+</button>
<button id="btnGet" type="button"  style="width:20%;">Show Graph </button>
<p style="margin-left:20px;">  Country</p>
<p style="margin-left:200px;margin-top:-33px;"> Population</p>
<div class="input">

</div>

JavaScript

var datax=[];
var val1=null;
var val2=null;
var count=0;
var txtfb=0;

         
$("#btnAdd").click(function(){

add_field();
Execute();

});

$("#btnGet").click(function(){

	shout_content();
  Execute();
  
});

$("#btnDelete").click(function(){

    $(".input").children("input[class=text-input1]:last").remove();
    $(".input").children("input[class=text-input2]:last").remove();
    $("br").remove();

    Execute();

});

function checkTxtval()
{
txtfb=0;
  $(".input").children("input").each(function()
  {
    if($(this).val()=="")
    {
		txtfb++;
    }


  });
  

  
   if(txtfb!=0)
   {
	 return true;
   }

}


function add_field()
{

  
$(".input").append("<input type='text' class='text-input1' ><input type='number' class='text-input2' ><br>");
ifblank();

}


    $("input").keyup(function(){
      
    });

$(document).on('keyup', "input",function () {
 ifblank();
});

function ifblank()
{

 	var result=checkTxtval();
  
  if(result)
  {
  $("#btnGet").attr('disabled', true); 
  }
  else
  {
  $("#btnGet").attr('disabled', false); 
  }
  
}
 
$( document ).ready( Execute );

function Execute() 
{
 if ( $('.input').children().length == 0 )
 {
      $("#btnGet").attr('disabled', true); 
 }

}


function shout_content()
{

count=0;
var zz =JSON.stringify(datax);
alert(zz);

datax=[];



$(".input").children("input").each(function(){
//alert($(this).val());
var array_input1 = {};

  if($.isNumeric($(this).val()))
    {
   		 count++;
       
       val2 =$(this).val();
       val2 =parseInt(val2);
       array_input1["name"] = val1;
       array_input1["data"] =[val2];
       array_input1["_colorIndex"] = count;
       var aa =JSON.stringify(array_input1);
     	 alert(aa);
       datax.push(array_input1);
      
    }
    else
    {
	
     val1 =$(this).val();
 
    }
    

    





}

);
   

	
 graph();
   
}

function graph()
{
$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
    ...