show and hide html element

Question

I have a problem may be very simple to you so please don't get angry :D I'm junior developer and I'm little bad at javascript. I have a form like this :

IMAGE :

When I choose " count view ", the input with lable " view " show up, and when I continue choose " count clic k", the input with lable " click " show up too.

Javascript code :

    $(document).ready(function(){
    $('body').on("click","#count_option", function(e){
        if($("#count_option").val() === $("#count_view").val()) {
            $("#view_form").show();
        }
        if($("#count_option").val() === $("#count_click").val()) {
            $("#click_form").show();
        }
    });
});

I want when i choose an option, just one input show up. Please help me.

Thanks in advance.

Answer 1

You have to hide other form when you want to see the another one and vice-versa. Check the code below, change few things and you'll be good to go.

$(document).ready(function(){
    $('body').on("click","#count_option", function(e){
        if($("#count_option").val() === $("#count_view").val()) {
            $("#view_form").show();
            $("#click_form").hide(); // hide other form
        }
        if($("#count_option").val() === $("#count_click").val()) {
            $("#click_form").show();
            $("#view_form").hide(); // hide other form
        }
    });
});