I am trying to change the chart content with the following script:

function switchType() {
    var e = document.getElementById("typeSelect");
   var selected_value = e.options[e.selectedIndex].value;
   console.log(selected_value)

   anychart.onDocumentReady(function () {
     var ents = {{ entities_dict|safe }}
     var dropdown = document.getElementById("typeSelect");
     var val = dropdown.value;
     /*
     var data = [
       {value: 'GeopoliticalEntity',
        children: [
        {% for i in entities_dict.get('GeopoliticalEntity') %}
           {value:   "{{ i }}"},
         {% endfor %}

       ]}
     ];
     */
     var data = [
     ];

     data.push({value:     val,
            children: [
               {value:   "country"},
               {value:   "europe"},
               {value:   "German"},

           ]})
     //let result = data.map(a => a.children);

     // create a chart and set the data
     var chart = anychart.wordtree(data, "as-tree");

     // set the chart title
     chart.title("Word Tree: Data (Tree)");

     // set the container id
     chart.container("word_tree");

     // initiate drawing the chart
     chart.draw();

 });
  }

This is my HTML

<div class="container">
  <div class="jumbotron">
    {% for k in survey %}
      <h2 class="display-4">Keyword Analysis</h2>
      <h2 class="display-5">Most frequent keywords</h2>
      <div id="word_cloud" style="width: 1000px; height: 500px; margin-bottom:5px;"></div><br>
      <h2 class="display-5">Keyword frequency and their relevance score</h2>
      <div id="bubble_chart" style="width: 1000px; height: 500px;"></div><br>
      <h2 class="display-5">Entities found in responses</h2>
      <select id="typeSelect" onchange="switchType()">
        {% for key in entities_dict.keys() %}
          {% if loop.first %}
            <option selected="selected" value="{{ key }}">{{ key }}</option>
          {% else %}
            <option selected="selected" value="{{ key }}">{{ key }}</option>
          {% endif %}
        {% endfor %}
    </select>
      <div id="word_tree" style="width: 1000px; height: 500px;"></div>
    {% endfor %}
  </div>
</div>

The result is that it creates the chart, then creates another one below, and another one on each select change.

Is there any way to overwrite the requested div instead of appending another one to the HTML page?