Using Jquery Clone to Change text/html from a hidden div content (Option 2)

Easy way in Jquery Change text/html from a hidden div content

by austinnoronha

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<hr>
<a href="#" class="serverres">Assume this click is ur server response...!!</a>
    <code id="logger">
        
    </code>
<hr/>

<h3>Div Container</h3>

<div class="box-container"></div>
<div id="hiddenChart" style="display:none;">
    <li style="height:auto;">
        <div class="col-sm-4" id="chart_0_0">
            <div class="panel panel-success" style="width:550px; height:auto;" id="accordion_0_0">
                <div class="panel-heading">
                    <div class="btn-group" style="float:right;"> <i class="glyphicon glyphicon-minus" id="minimize_0_0"></i>
 <i class="glyphicon glyphicon-remove" id="close_0_0"></i>

                    </div>
                     <h3 class="panel-title">title</h3>

                </div>
                <div class="panel-body" style="height:400px;">
                    <nvd3-multi-bar-chart data="Sec1Graf1Data" id="dataChart_0_0" height="400" showXAxis="true" reduceXTicks="true" showYAxis="true" showLegend="true" showControls="true" tooltips="true">
                        <svg></svg>
                    </nvd3-multi-bar-chart>
                </div>
            </div>
        </div>
    </li>
</div>

JavaScript

$(document).ready(function () {

    var serverRes = {
        title: "New Title In Header",
        body: "New body text from server <\/br><nvd3-multi-bar-chart data=\"Sec1Graf1Data\" id=\"dataChart_0_0\" height=\"400\" showXAxis=\"true\" reduceXTicks=\"true\" showYAxis=\"true\" showLegend=\"true\" showControls=\"true\" tooltips=\"true\"><svg><\/svg><\/nvd3-multi-bar-chart>"
    };

    var tmpOldCont = $("#hiddenChart").clone();

    var counter = 1;
    $(".serverres").click(function () {

        console.log(tmpOldCont.find("#chart_0_0").attr("id","chart_0_1"));
        console.log(tmpOldCont.find("#chart_0_0"));
        console.log(tmpOldCont.find("#chart_0_1"));
        
        tmpOldCont.find(".panel-body").html(counter + " = " + serverRes.body);
        tmpOldCont.find(".panel-title").text(serverRes.title + " " + counter);
        counter++;

        $(".box-container").html(tmpOldCont.html());
        
        
    });

});