[Solved]-D3,js on mouse event CLICK appending only the first image from data set-d3.js

var data = [{
  "val": 5,
  "imgsrc": "http://www.iconsdb.com/icons/preview/gray/square-rounded-xxl.png"
}, {
  "val": 40,
  "imgsrc": "http://www.iconsdb.com/icons/preview/color/005500/square-rounded-xxl.png"
}, {
  "val": 50,
  "imgsrc": "http://www.iconsdb.com/icons/preview/black/square-rounded-xxl.png"
}, {
  "val": 60,
  "imgsrc": "http://www.iconsdb.com/icons/preview/color/550055/square-rounded-xxl.png"
}, {
  "val": 80,
  "imgsrc": "http://www.iconsdb.com/icons/preview/color/990000/square-rounded-xxl.png"
}];

var width = 500;
var height = 500;

var widthScale = d3.scale.linear()
  .domain([0, 100])
  .range([0, width]);

var color = d3.scale.linear()
  .domain([0, 100])
  .range(["red", "blue"]);

var axis = d3.svg.axis()
  .scale(widthScale)
  .ticks(5);

var container = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(20, 0)");

var bars = container.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", function(d) {
    return widthScale(d.val)
  })
  .attr("height", 30)
  .attr("fill", function(d) {
    return color(d.val)
  })
  .attr("y", function(d, i) {
    return i * 50
  });

var images = [];

var setEvents = bars
  .on('click', function(d) {
    d3.select("#tool").style("opacity", 1.0);
   // d3.select("#tool").html(d.imgsrc);
    images.push(d.imgsrc);
    d3.select('#tool')
      .selectAll("img")
      .data(images)
      .enter()
      .append('img')
      .attr("width", 50)
      .attr("height", 50)
      .attr('src', function(d, i) {
        return d
      });
  });

container.append("g")
  .attr("transform", "translate(0, 400)")
  .call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="tool"></div>