Get content of <div> knowing its id

Question

I am trying to get the content of a element of which I know partially the id.
The foo variable is correctly generated, but I cannot get it to return a chart object from the div element.
This is the jQuery code I am using:

$(".addViewport").click(function () {                   

  var foo = "#" + $(this).parent().children('div[id$="_chart"]').attr('id');

  var chart = foo.CanvasJSChart();

  chart.options.axisX.viewportMaximum += 86400000;
  chart.render();

});

And this is the html:

<div id="temperature">
    <div id="temperature_chart" style="height: 300px; width: 100%;"></div>
    <button class="addViewport">Viewport +</button>
</div>

The chart library I am using is called CanvasJS and it has a method called .CanvasJSChart(); to get the chart from specific div element.

Answer 1

This line returns a string ( "#temperature_chart" ):

var foo = "#" + $(this).parent().children('div[id$="_chart"]').attr('id');

and that's why this line cannot work:

var chart = foo.CanvasJSChart();

---

foo needs to become a jQuery object in order for all that to work. For example:

var foo = $(this).parent().children('div[id$="_chart"]');

Answer 2

This worked for me in JSFiddle:

$(".addViewport").parent().children().get(0)

https://jsfiddle.net/fyvh0o56/