Open and close a form with jquery/js

I have added 4 selections to a dropdown menu to load the designated form, however, when clicking on the following selection the previous form is still visible. I need to be able to transition between forms and not load the next selection on top of the previous one.

HTML forms:

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          I'm a dropdown button
                        </button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" type="button" id="form1btn">form1btn</a>
<a class="dropdown-item" type="button" id="form2btn">form2btn</a>

                        <form id="form1">
                        <div class="form-group">
                          <label for="formGroupExampleInput"> I'm form 1</label>
                          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                        </div>
                        </form>

                        <form id="form2">
                        <div class="form-group">
                          <label for="formGroupExampleInput"> I'm form 2</label>
                          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                        </div>
                        </form>

jquery buttons and hide/show:

    $('#form1').hide()
$('#form2').hide()
$(document).ready(function(){
    $('#form1btn').click(function(){
    $('#form1').toggle();
    });

$('#form2btn').click(function(){
    $('#form2').toggle();
    });

});