I would appreciate any sugestion. I need use several dropdown menu in some parts of markdown document. Part 1 is working, but the other no. Anyone would help me? Thanks in advance.

<script language="javascript">
function display(){
    var e = document.getElementById("dropDownId");
    var index = e.selectedIndex;
    if(index==0){
        document.getElementById("first").style.display = 'block'
        document.getElementById("second").style.display = 'none'
    }
    else if(index==1){
        document.getElementById("first").style.display = 'none'
        document.getElementById("second").style.display = 'block'
    }
}
</script>

# Part 1
<select class="bootstrap-select" id="dropDownId" onchange="display()">
<option value="1" selected="selected">Metric</option>
<option value="2">Non-metric</option>
</select>
<div id="first">plot 1</div>
<div id="second" style="display: none;">plot 2</div>

# Part 2
<select class="bootstrap-select" id="dropDownId" onchange="display()">
<option value="1" selected="selected">Metric</option>
<option value="2">Non-metric</option>
</select>
<div id="first">plot 3</div>
<div id="second" style="display: none;">plot 4</div>

# Part 3
<select class="bootstrap-select" id="dropDownId" onchange="display()">
<option value="1" selected="selected">Metric</option>
<option value="2">Non-metric</option>
</select>
<div id="first">plot 4</div>
<div id="second" style="display: none;">plot 5</div>