Change form when renaming in combobox

Question

I have this code to create multiple forms within the same page, and when changing the form name it changes form on the same page:

<select id="mudar_produto"> 
    <option value="#produto_1">Novo Produto Higiene</option> 
    <option value="#produto_2">Entrada de Produtos Higiene</option> 
    <option value="#produto_3">Novo Produto Nutricia</option> 
</select>

<section class="hide-section" action="#" id="produto_1">
    <form id="form3" method="POST" onsubmit="return form_validation()"> 
        <h1>
            <center>
                <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong> 
            <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong> 
            <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
        </div>
        </fieldset>
        <button type="submit" name="submit" class="botao submit">Registo</button>
    </form> 
</section>

<section class="hide-section" id="produto_2"> 
    <form name="form4" method="POST" onsubmit="return form_validation()"> 

         <h1>
            <center>
                <strong>Entrada de Produtos de Higiene</strong>
            </center>
        </h1><br>

        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Data Entrada">Data Entrada</label></strong>
            <input id="DataEntrada" type="date" name="DataEntrada" required="" style="width:180px" value="<?php echo date("Y-m-d");?>">
        </div>
        </fieldset>
        <fieldset class="grupo">
    <div class="campo"> 
        <strong><label for="Produto">Produto</label></strong>
        <select id="first_dd" name="Produto" style="width:250px" required> 
            <option></option> 
            <?php 
                $sql = "SELECT * FROM centrodb.ProdHigiene WHERE Ativo = 1 ORDER BY DescricaoProd ASC"; 
                $qr = mysqli_query($conn, $sql); 
                while($ln = mysqli_fetch_assoc($qr)){ 
                    echo '<option value="'.$ln['IDProd'].'"> '.$ln['DescricaoProd'].'</option>'; 
                    $valencia[$ln['IDProd']]=array('DescricaoUnid'=>$ln['DescricaoUnid'],'DescricaoUnid'=>$ln['DescricaoUnid']); 
                } 
            ?> 
        </select> 
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong>
        <select id="second_dd" name="Unid" style="width:150px" required> 
            <option></option> 
            <?php
                foreach ($valencia as $key => $value) { 
                    echo '<option data-id="'.$key.'" value="'.$value['DescricaoUnid'].'">'.$value['DescricaoUnid'].'</option>'; 
                }
            ?> 
        </select><br> 
        </div>
        </fieldset>
        <fieldset class="grupo">
    <div class="campo"> 
        <strong><label for="Quantidade">Quantidade</label></strong>
            <input type="text" id="Quantidade" name="Quantidade" style="width:80px" required="" size="40">
        </div>
    <div class="campo"> 
        <strong><label for="Preço">Preço</label></strong>
            <input input type="text" id="Preco" name="Preco" style="width:100px" value="0.00">
        </div> 
    </fieldset>
        <button type="submit" name="submit1" class="botao submit">Registo</button>
    </form>
</section> 

<section class="hide-section" id="produto_3"> 
    <form id="form3" name="form3" method="POST" onsubmit="return form_validation()" > 
        <h1>
            <center>
                <strong>Produtos de Nutricia</strong>
            </center>
        </h1><br> 
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong>
                <input type="text" id="ProdNutricia" name="ProdNutricia" style="width:400px" required="" size="120" />
            </div> 
    </fieldset>
        <button type="submit" name="submit" class="botao submit">Registo</button>
    </form> 
</section> 

And I have this function to change forms:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".hide-select:not(:first)").hide();
    $('#mudar_produto').change(function(){
        $('.hide-select').hide();
        $($(this).val()).show();
    });
    $('#first_dd').change(function(){ 
        var id = $('#first_dd option:selected').val(); 
        $.each($('#second_dd option'),function(){ 
            if($(this).attr('data-id')==id){ 
                $(this).attr('selected',true); 
            }
        }); 
    }); 
}); 
</script>

Now when you open the page you don’t open any form, it looks like this:

Then when I open a form it looks like this:

The problem is now, I should leave the form I showed in the previous image and stay the new one I opened, but instead they are both open, as shown in the image:

Answer 1

Class names were wrong:

$(".hide-section:not(:first)").hide();
$('#mudar_produto').change(function(){
    $('.hide-section').hide();
    $($(this).val()).show();
});