2 pie chart on html

2 pie chart on html
0

I have created 2 pie charts but the 1st pie chart is not showing the data. The 2nd one works fine. When i remove the 2nd pie chart, the 1st one works.
Any idea what went wrong ? I have indicated different variable names for each pie chart.

HTML code

<body>
    <section>
    <!-- first pie chart-->
    
    <h2>Search terms "Seabass" in NYC restaurants sort by most reviewed</h2>
    <h3>Data collected among 120 Yelp reviews that words mentioned seafood, fish, bass, chilean</h3>
    <select id="selDataset" onchange="getData(this.value)">
        <option value="dataset1">No.1 Joe's shanghai's @ 6158 reviews</option>
        <option value="dataset2">No.2 Eataly's @ 5499 reviews</option>
        <option value="dataset3">No.3 Ippudo's @ 3676 reviews</option>
    </select>
    <div id="pie"></div>
    <script src="plots.js"></script>

</section>
<p>===========================================================================</p>
<section>

<!-- Second pie chart-->

    <h2>Search terms "Seabass" in NYC restaurants sort by most recommended</h2>
    <h3>Data collected among 120 Yelp reviews that words mentioned seafood, fish, bass, chilean</h3>
    <select id="selDataset2" onchange="getData2(this.value)">
        <option value="dataset4">No.1 Fish cheek</option>
        <option value="dataset5">No.2 Kotobuki</option>
        <option value="dataset6">No.3 Midtown catch</option>
    </select>
    <div id="pie2"></div>
    <script src="plots2.js"></script>
</div>
</section>
</body>

JavaScript code below

 var data = [{
   values: [0, 0, 20, 6],
   labels: ["Bass", "Chilean", "Fish", "Seafood"],
   type: "pie"
 }];
 var layout = {
   height: 600,
   width: 800
 };
Plotly.plot("pie", data, layout);
}
function updatePlotly(newdata) {
 var PIE = document.getElementById("pie");
 Plotly.restyle(PIE, "values", [newdata]);
}
function getData(dataset) {
 var data = [];
 switch (dataset) {
 case "dataset1":
   data = [0, 0, 20, 6];
   break;
 case "dataset2":
   data = [0, 0, 4, 7];
   break;
   default:
   data = [0, 0, 0, 0];
 }
 updatePlotly(data);
}

Not sure if it’s that but there’s a closing div tag at the end that doesn’t seem to have a matching opening tag.