JSFiddle - React, Tailwind, and code Playground

HTML

<body></body>

JavaScript

var data = [10, 20, 30, 40];
var divs = d3.select('body')
  .selectAll('div')
  .data(data);
divs.enter()
  .append('div');
divs.on('click', function(d,i) {
  d3.select(this)
    .style('background-color','#42efef')
    .style('padding','5px')
    .text(d)
})
    .style({
      width:'20px',
      height:function(d) { return d + 'px' },
      margin:'15px',
      float:'left',
      'background-color':'#25B0B0'
    });

newData = [50, 100];

//Select all the divs

//Bind the newData array to the div elements

//Remove the extra div elements

//Style the elements using the new data values
//Height of the bars should be set by the array element.