JSFiddle - React, Tailwind, and code Playground

by floor_

HTML

<div class="form-group">
                                <label for="personal_family_type" class="control-label col-sm-2">type</label>
                                <div class="col-sm-10">
                                    <select size="1" id="personal_family_type" name="personal_family_type" class="form-control btn btn-primary" >
                                        <option value="0">----</option>
                                        <option value="wife">Wife</option>
                                        <option value="husband">Husband</option>
                                        <option value="son">Son</option>
                                        <option value="all">Show all</option>
                                    </select>
                                    <div id="personal_family_type_wife_block" style="display :none">
                                        wife
                                    </div>
                                    <div id="personal_family_type_husband_block" style="display :none">
                                        husband
                                    </div>
                                    <div id="personal_family_type_son_block" style="display :none">
                                        son
                                    </div>
                                </div>
                            </div>

JavaScript

$( document ).ready(function() {
    $('#personal_family_type').on('click', function() {
        console.log(this.id + "_" + this.value + "_block");
        $("#"+this.id + "_" + this.value + "_block").toggle();
    });
});