When i clone a bar chart using php and it is created with morris js data is not showing in the second chart

I need same graph to be used in same page twice, graph is duplicated using php but data is showing only in the first one and when i reload the second is adding the data in the first one like i will show in photos

<div class="inbox-widget scrollbar-track-widgets scrollbar-track-gray nicescroll total_inspections-scrollbar">
<div id="total_inspections_comparison_content_chart"></div>

<script type="text/javascript">

var data = <?php echo json_encode($chart_data);?>;
var data_colors = <?php echo json_encode($data_colors);?>;
var data_labels = <?php echo json_encode($data_labels);?>;
var widget_parms = <?php echo json_encode($widget_parms);?>;

function createBarChart(element, data, xkey, ykeys, labels, lineColors, hoverCallBack)
{
    hoverCallBack = (typeof hoverCallBack == 'undefined') ? function (index, options, content, row)
    {
        return content;
    } : hoverCallBack;
    if ($('#total_inspections_comparison_content_chart').length > 0)
    Morris.Bar({
        element: element,
        data: data,
        xkey: xkey,
        ykeys: ykeys,
        labels: labels,
        hideHover: 'auto',
        resize: true, //defaulted to true
        xLabelFormat: function (x) {
            return x.src.period;
        },
        gridLineColor: '#eeeeee',
        barSizeRatio: 1.3,
        barColors: lineColors,
        hoverCallback: hoverCallBack,
        preUnits: "",
        barSize: 10
    });
}

createBarChart(
    'total_inspections_comparison_content_chart',
    data,
    'date',
    ['three_years_back', 'two_years_back', 'last_year', 'this_year'],
    data_labels,
    function (row, series, type) {
        var now = new Date();
        var now_year = now.getFullYear();
        if(row.label.indexOf(now_year) >= 0 || (row.label === `Dec 31, ${now_year-1}` && (widget_parms == 'this_month' ||  widget_parms == 'year_to_date' || widget_parms == 'last_three_months')))
            color = data_colors[differenceYear(series.label)];
        else if (typeof data_colors[differenceYear(series.label - 1)]  != 'undefined') color = data_colors[differenceYear(series.label - 1)];
        else color = data_colors[differenceYear(series.label)];
        return color;
    },
    function (index, options, content, row)
    {
        $tooltip_info_obj = generateTooltip(options, content, row);
        return $tooltip_info_obj;
    }
);

function generateTooltip(options, content, row){
    var $jQueryObject = $($.parseHTML('<div>' + content + '</div>'));
    $jQueryObject.find('.morris-hover-row-label').addClass('hover-label-style');
    var tooltipInfo = '';
    tooltipInfo = '<strong>' + row.period + '</strong><br>';

    if(row.three_years_back !== 0){
        tooltipInfo += row.three_years_back_label + ': ' + row.three_years_back + '<br>';
    }
    if(row.two_years_back !== 0){
        tooltipInfo += row.two_years_back_label + ': ' + row.two_years_back + '<br>';
    }
    if(row.last_year !== 0){
        tooltipInfo += row.last_year_label + ': ' + row.last_year + '<br>';
    }
    if(row.this_year !== 0){
        tooltipInfo += row.this_year_label + ': ' + row.this_year + '<br>';
    }

    $jQueryObject.find('.morris-hover-row-label').html(tooltipInfo);
    $jQueryObject.find('.morris-hover-point').remove();
    return $jQueryObject.contents();
}

function differenceYear (year) {
    var previous_year_date = new Date(year,1,1);
    var previous_year = previous_year_date.getFullYear();
    var this_year_date =  new Date();
    var this_year = this_year_date.getFullYear();
    difference = this_year - previous_year;
    return difference;
}

function generateChartLegend(data_colors, data_labels){
    data_colors_rev = data_colors;
    data_colors_rev = data_colors_rev.reverse();
    for(let elem  in data_labels){
        var wrapper = document.createElement('div');
        var label_div = document.createElement('div');
        var color_box_div = document.createElement('div');
        wrapper.style.float = 'left';
        wrapper.style.margin = '0px 0px 0px 15px';
        label_div.innerHTML = data_labels[elem];
        label_div.style.display = 'inline';
        color_box_div.style.background = data_colors_rev[elem];
        color_box_div.style.float = 'left';
        color_box_div.style.width = '10px';
        color_box_div.style.height = '10px';
        color_box_div.style.margin = '4px 10px 0px 0px';
        wrapper.append(color_box_div);
        wrapper.append(label_div);
        $('#total_inspections_graph_legend').append(wrapper);
    }
}
generateChartLegend(data_colors, data_labels);

As you can see in the photo the first graph is taking data of the second and the second graph is not showing anything

<style>
#total_inspections_comparison_content_chart {
    min-width: 500px !important;
}
.total_inspections-scrollbar {
    max-height: 500px !important;
}

here is migration file

public function up()
{

$this->addWidget(12, ‘Total Inspections Comparison’, ‘total_inspections_comparison’, 1);
}
enter image description here