Displaying Or Hiding Multiple Fields Based On Selection Dropdown - Jquery

I have a form containing a dropdown. Depending on the selection made in the dropdown, multiple fields should appear or hide. The jquery function, I have written, works only for one

Solution 1:

first, you should remove id "showing" from elements and add a class name "showing" or you can add this class to the parent element of all these elements. second, you should change your id to class in jquery. and I think you didn't add the script that loads jquery.

code after edit:

 $(document).ready(function(){
        $('.showing').hide();
        $('#condition').change(
            function(){
                if(this.value == "yes"){
                    $('.showing').show();
                }
                else {
                    $('.showing').hide();
                }
            }
        )
    });

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="col-4"><divclass="d-flex"><divclass="flex-fill p-2"><selectname="playing"class="form-control"id="condition"required><optionvalue="no">No</option><optionvalue="yes">Yes</option></select></div></div></div><divclass="row"><divclass="col-2"><divclass="d-flex"><divclass="p-1"><labelclass="p-2 showing"for="what">What</label></div></div></div><divclass="col-4"><divclass="d-flex"><divclass="flex-fill p-2"><inputtype="text"class="form-control input-text showing"name="wat" 
                                ></div></div></div><divclass="col-2"><divclass="d-flex"><divclass="p-1"><labelclass="p-2 showing"for="type">Type</label></div></div></div><divclass="col-4"><divclass="d-flex"><divclass="flex-fill p-2"><inputtype="text"class="form-control input-text showing"name="type" 
                                ></div></div></div></div>

Solution 2:

**Please check HTML rules for define input id and class **

Element IDs should be unique within the entire document.

<div><imgsrc="https://playcode.io/static/img/logo.png"alt="PlayCode logo"><h1id="msg"></h1><divclass="col-4"><divclass="d-flex"><divclass="flex-fill p-2"><selectname="playing"class="form-control"id="condition"required><optionvalue="yes">Yes</option><optionvalue="no">No</option></select></div></div></div></div><divclass="row"><divclass="what_hide"><divclass="col-2"><divclass="d-flex"><divclass="p-1"><labelclass="p-2"for="what"id="showing" >What</label></div></div></div><divclass="col-4"><divclass="d-flex"><divclass="flex-fill p-2"><inputid="wat"type="text"class="form-control input-text"name="wat" 
                            ></div></div></div></div><divclass="col-2"><divclass="d-flex"><divclass="p-1"><labelclass="p-2"for="type"  >Type</label></div></div></div><divclass="col-4"><divclass="d-flex"><divclass="flex-fill p-2"><inputid="new"type="text"class="form-control input-text"name="type" 
                            ></div></div></div></div>

JS

$(document).ready(function(){
    $('.what_hide').hide();
    $('#condition').change(
        function(){
            if(this.value == "yes"){
                $('.what_hide').show();
            }
            else {
                $('.what_hide').hide();
            }
        }
    )
});