jQuery dynamic form display on select option

I'm using the following jQuery function to show a specific form on selection of a value in a select box.

<script>
$("#selectCategory").on("change", function() {
    $("#" + $(this).val()).show();
})
</script>

The select option value is matched with the form id. The problem I'm facing is that on the first onchange event, the code works alright. But on subsequent onchange events, the new form is appended onto the existing form. For instance, if I select #xyz option, then the #xyz form is rendered. But now if I change my select option to #abc, the #abc form is appended to the #xyz form.

If a user changes his selection, the original form should be removed and then the new form should be rendered. For example, if I choose #abc option after choosing #xyz option, the #xyz form should be removed, and the #abc form should be displayed in its place.

<select id="selectCategory" name="category" style="width:100%;" tabindex="1">
        <option value=""></option>
        <option value="book">Textbooks/Course Material</option>
        <option value="compexam">Entrance Exam Books</option>
</select>

<form class="upload" id="book" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none">
<form class="upload" id="compexam" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none" >

I hope this was comprehensible!