高级父级更改后文本框不会消失

In my page, there are 3 levels drop-down selection boxes, children are hidden until the parent is selected.

Levels
Health test organization (Level 1) -> Test Type (Level 2) -> Test Result (Level 3)

In the end of the one route, two boxes (LDI and RDI) appear in addition to the test result at level 3. The problem is; although the boxes disappear when I change level 3, those don't disappear if I change level 1 or 2.

Here are screen shots of my problem,
No selection,

Level 1 selected,

Level 2 selected,

Level 3 selected and boxes appear,

And the problem,

I just changed Health test organization (Level 1) above and the two boxes (LDI and RDI) are still there.

By the way, here is JavaScript of that part coded within the PHP script;

function options($type)
{
    if($type== 'org')
    {
        return array('Not selected'=>'','OFA'=>'ofa','CERF'=>'cerf','CHIC'=>'chic','AHT'=>'aht','PennHip'=>'pennhip','Other'=>'other');
    }
    if($type== 'pass')
    {
        return array('Not selected'=>'','PASS'=>'1','FAIL'=>'0');
    }
    if($type== 'type')
    {
        return array('Not selected'=>'',
        'Eye (CERF)' => 'eye',
        'Cardiac (OFA)' => 'cardiac',
        'Elbow (OFA)' => 'elbow',
        'Hips (OFA)' => 'hips',
        'Patellar Luxation (OFA)' => 'pl',
        'Thyroid (OFA)' => 'thyroid',
        'DNA (OFA)' => 'dna',
        'Primary Open Angle Glaucoma (OFA)' => 'poag',
        'Other (not active yet)' => 'other',
        'Longevity (not active yet)' => 'longevity',
        'Genotype (not active yet)' => 'genotype',
        );
    }
    if($type== 'result')
    {

    }
}

function get_for_dog($id)
{
    $arr[':id'] = $id;
    $str = 'SELECT * FROM ' . $this->table . ' WHERE dog=:id';
    if ($this->obj_debug == 1 || $this->core_debug == 1)
        echo "$str<br>";
    return $this->run_query($str,$arr);
}

function resultdd($test,$result)
{
        $list = array();
        foreach($this->testresults as $txt => $val)
        {
            if(strstr($val,$test.'.') ||$val =='' )
            {
                $list[$txt] = $val; 
            }
        }
        if(sizeof($list) > 0 && $test != '')
        {
            $buf = '<select name="rating">';
            foreach($list as $txt =>$val)
            {
                $buf .= '<option value="'.$val.'" ';
                if($val == $result)
                    $buf .= ' selected ';
                $buf .= '>'.$txt.'</option>
                ';
            }
            $buf .= '</select>';
        }
    return $buf;
}

function customFields($i=0,$r='')
{
    $buf = '';
    if($this->data[$i]['rating'] =='pennhip.ldirdi' || $r =='pennhip.ldirdi')
    {
        $dft = array('ldi'=>'','rdi'=>'');
        if($this->data[$i]['rating_data'] != '')
        {
            $dat = json_decode($this->data[$i]['rating_data'],true);
            if(sizeof($dat) == 2)
                $dat=$dat;
            else
                $dat = $dft;
        }
        else
            $dat = $dft;    
        $buf .= 'LDI <input type="text" name="rating_data[]" value="'.$dat['ldi'].'" /><br><br>';
        $buf .= ' <input type="hidden" name="rating_key[]" value="ldi" />';
        $buf .= 'RDI <input type="text" name="rating_data[]" value="'.$dat['rdi'].'" /><br><br>';
        $buf .= ' <input type="hidden" name="rating_key[]" value="rdi" />';
    }
    return $buf;
}

I'm sure there are ways to get rid of those boxes, I'd appreciate any help.

This actually looks really confusing, but what are you doing to make the LDI/RDI to display in the first place?

The simplest solution from a glance is to just change the styling of the inputs to display: none when you change the test type, which can be done through onchange().

I found out that the functions that control Level 2 & 3 in JavaScript don't set that tag (cfs) as empty when those run. So, in order to solve the issue, I added lines in those functions to set that tag empty everytime those run.

Here are the code and the lines I added,

function popResults()
{
    $("#cfs").html(""); // <-- added this line
    var t = '';
    if($( "select[name='type'] option:selected" ).val().length >0)
        t = $( "select[name='type'] option:selected" ).val();
    else
        t =$( "#testtypes" ).attr("data-type");

    $.ajax({url: "ajax_results.php?test="+t+"&result=" + $( "#testresults" ).attr("data-result"), success: function(result){      
        $("#testresults").html(result);
        $("select[name='rating']").change(function() {
            $.ajax({url: "ajax_customFields.php?r="+$( "select[name='rating'] option:selected" ).val(), success: function(result){
                $("#cfs").html(result); // <-- already there
            }});
        });        
    }});
}

function popTypes()
{
    $("#cfs").html(""); // <-- added this line
    $.ajax({url: "ajax_types.php?org="+$( "select[name='org'] option:selected" ).val()+"&type=" + $( "#testtypes" ).attr("data-type"), success: function(result){
        $("#testresults").html('');
        $("#testtypes").html(result);
        $( "select[name='type']" ).val('');
        $("select[name='type']").change(function() {
            popResults();
        });     
    }});
}