Question: I'm using the Flask framework to make an information retrieval system. 

I'm trying to have a div pop up when I click on a name. Right now I'm looping through a list of names and outputting them next to each other as buttons. But, when I click on a button, I want a div to dropdown from that button. However, every time I click on the button, it refreshes the page and removes all my outputted names. Right now myDiv function is not even being called. How can I get the div to appear below the button I press without removing all the other output?

```js
// actions.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
```

```html
<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>
```

Answer: 
By default the type of a `button` is `submit`. You have to change that to `button` implicitly:

```
<button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>

```
button type of your button need to be set button

```js
// action.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
```

```html
<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>
```