How to derive dependent dropdown list from radio button using javascript?

I want to create a dropdown named Accident Type where user can choose the type of accident according to previous choosen value. The hierarchy for the dropdown is as below;

Choose Incident Type: 1.Accident 2.Near Miss Choose Incident Category: For Accident; 1. Injurious 2. Non-Injurious, For Near Miss; 1. Hypo Near Miss 2. LOPO Choose Accident Type: Accident Type only applied for Injurious and Non-Injurious

So for I have try using the solution provided here : How to make a dependent radio button based on the option selected?

and here: JavaScript dependent drop down list

<div class="form-group row" id="incident_type1">
                        <div class="col-md-2">
                            <label for="incident_type">Incident Type : </label>
                        </div>
                        <div class="col-md-2">
                            <div class="radio radio-info radio-inline">
                                <input type="radio" name="incident_type" id="accident" value="Accident">
                                <label for="incident_type"> Accident </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio radio-inline">
                                <input type="radio" name="incident_type" id="nearmiss" value="Near Miss">
                                <label for="incident_type"> Near-Miss </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row" id="incident_category">
                        <div class="col-md-2">
                            <label for="incident_category">Incident Category  : </label>
                        </div>
                        <div class="col-md-2">
                            <div class="radio radio-info radio-inline">
                                <input type="radio" name="incident_category" id="injurious" value="Injurious|1">
                                <label for="incident_category"> Injurious </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio radio-inline">
                                <input type="radio" name="incident_category" id="noninjurious" value="Non-Injurious|2">
                                <label for="incident_category"> Non-Injurious </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row" id="incident_category1">
                        <div class="col-md-2">
                            <label for="incident_category1">Incident Category  : </label>
                        </div>
                        <div class="col-md-2">
                            <div class="radio radio-info radio-inline">
                                <input type="radio" name="incident_category1" id="hipo" value="HIPO">
                                <label for="incident_category1"> HIPO </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio radio-inline">
                                <input type="radio" name="incident_category1" id="lopo" value="LOPO">
                                <label for="incident_category1"> LOPO </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row" id="accident_type1">
                        <label for="accident_type1" class="col-md-2 col-form-label">Accident Type : </label>
                        <div class="col-md-10">
                             <select disabled="disabled" class="subcat" id="accident_type1" name="accident_type1">
                                <option value>Accident Type</option>
                                <!-- Injurious -->
                                <optgroup data-rel="Injurious">
                                  <option value="Fatality"> Fatality</option>
                                  <option value="PTD/PPD">PTD/PPD</option>
                                  <option value="Lost Workday Case (LWC)">Lost Workday Case (LWC)</option>
                                  <option value="Restricted Work Case (RWC)">Restricted Work Case (RWC)</option>
                                  <option value="Medical Treatment Case (MTC)">Medical Treatment Case (MTC)</option>
                                   <option value="First Aid Case (FAC)">First Aid Case (FAC)</option>
                                </optgroup>
                                <!-- Non-Injurious -->
                                <optgroup data-rel="Non-Injurious">
                                  <option value="Minor Fire">Minor Fire</option>
                                  <option value="Major Fire">Major Fire</option>
                                  <option value="Explosion">Explosion</option>
                                  <option value="Minor Property Damage">Minor Property Damage</option>
                                  <option value="Major Property Damage">Major Property Damage</option>
                                  <option value="Equipment Damage">Equipment Damage</option>
                                  <option value="Business Interruption">Business Interruption</option>
                                  <option value="Hazard">Hazard</option>
                                  <option value="Environment">Environment</option>
                                  <option value="Public/Security/Others">Public/Security/Others</option>
                                  <option value="Chemical Spill">Chemical Spill</option>
                                  <option value="Spill">Spill</option>
                                  <option value="Loss of Primary Containment (LOPC)">Loss of Primary Containment (LOPC)</option>
                                </optgroup>
                              </select>
                        </div>
                    </div>

<script>
 $(function(){

    var $cat = $("#incident_type1"),
        $subcat = $(".subcat");

    var optgroups = {};

    $subcat.each(function(i,v){
        var $e = $(v);
        var _id = $e.attr("id");
            optgroups[_id] = {};
            $e.find("optgroup").each(function(){
        var _r = $(this).data("rel");
        $(this).find("option").addClass("is-dyn");
        optgroups[_id][_r] = $(this).html();
            });
    });
    $subcat.find("optgroup").remove();

    var _lastRel;
    $cat.on("change",function(){
        var _rel = $(this).val();
        if(_lastRel === _rel) return true;
        _lastRel = _rel;
        $subcat.find("option").attr("style","");
        $subcat.val("");
        $subcat.find(".is-dyn").remove();
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.each(function(){
            var $el = $(this);
          var _id = $el.attr("id");
          $el.append(optgroups[_id][_rel]);
        });
        $subcat.prop("disabled",false);
    });

});

</script> }

I expect that when user choose Injurious or Non Injurious on Incident Category, the category for Accident Type will shows respectively but I'm stuck at the Accident Type which the dropdown is unclickable.

How my form look like right now