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>

<br>
<button id="btnPlus" type="button">+</button>
<button id="btnGet" type="button"  style="width:20%;">Get </button>
<p style="margin-left:20px;">  Country</p>
<p style="margin-left:140px;margin-top:-33px;"> Population</p>
<div id="div1">

</div>

JavaScript

var a=0;
var arC=[];
var arP=[];
var dcid="#ic";
var dpid="#ip";

var datax=[ ];


var array_input1 = {};
var array_input2={};


var count=0;

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

add_field();

});

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

getData();

});



function add_field()
{
/*
var clone = $(".text-input").clone();
clone.removeClass("text-input");
clone.appendTo(".input");
*/

//$(".input").append("<input type='text' class='text-input'>");

$("#div1").append("<input id='ic"+a+"'type='text'><input id='ip"+a+"' type='text'><br>");

a++;


}

function getData()
{

var bb =JSON.stringify(datax);
alert(bb);

  for(i=0;i<a;i++)
  {
  
  dcid=dcid+i;
  dpid=dpid+i;
  
	arC[i]=$(dcid).val();
  
	arP[i]=$(dpid).val();


  arP[i]= parseInt(arP[i]);

    var val1 = arC[i];
    var val2 = [arP[i]];
    
    array_input1["name"] = val1;
 	 	array_input1["data"] =val2;

    
  var aa =JSON.stringify(array_input1);
  alert(aa);

  dcid="#ic";
  dpid="#ip";
   
 
  }
  
  datax.push(array_input1);


  
  /*
  alert(arC);
 	alert(arP);
 */
  
  
$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Population'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {

            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: datax
        
   ...