having issues with onclick() in javascript

I got a check box - when I check it, it prints out a drop down list...but when I uncheck it, the drop down list doesn't disappear...on the second click after unchecking it (i.e. third click in total) the ENTIRE page disappears...when I just want the drop down list to disappear and the check box to remain...

i've got the code below...pls gimme feedback on what's wrong!

thanks a mill!!!

<script type="text/javascript">


var app = true;



        function rFields1(elm){
            if (app == false){

        var tra = elm.parentNode.parentNode;
        tra.remove();

            }
            app = true;
        }

        function addFields1(){
            if(app == true){    
            var container = document.getElementById("container1");
            var table = document.createElement("table");

            table.border=1; 
            table.cellspacing=0;     
            table.id ="education";
            table.name = "education[]";     
            container.appendChild(document.createTextNode(""));
            var tr = document.createElement("tr");

            var td1 = document.createElement("td");
            td1.valign = "top";

var slct = document.createElement("select"); //? how do I fix this up
  slct.id = "institution";
  slct.name = "institution[]";
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM levels ORDER BY id asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[level]';\r\n");
        echo("opt.text ='$row1a[level]';\r\n");
        echo("slct.appendChild(opt);");
    }
?>

slct.value='<?php echo $_GET['id2']; ?>';                       //container.add(option);
container.appendChild(slct);//? how do I fix this up
        //      select1.appendChild(option);
td1.appendChild(slct);
tr.appendChild(td1);




            container.appendChild(document.createElement("br"));


            table.appendChild(tr);  
            container.appendChild(table);   
            app = false;
            }

            else {
            colour.onclick=function(){
            rFields1(this);};   
        //  app = true;
        }
    }

    </script>
<form id="myform" action="" align="center" method="post" enctype="multipart/form-data">
<div id="div2">
<table border="1" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>

<input type="hidden" id="idz" name="idz">



<br><H2 align="center">EDUCATION</H2><br>
<div id="container1">
<table border="1" id="education" name="education[]" cellspacing="0" style="margin-top:12px width="900"">

<colgroup>
<col span="1">
</colgroup>
<input name="colour" id="colour" type="checkbox" onclick="addFields1()" />
<a href="#" type="hidden" id="Remove" name="Remove" onclick="rFields1(this)"></a>


</table>

</div>


</table>


</form>
<br>

Checkbox Unchecked By Default

Checked Checkbox printing out the dropdown list

[Checkbox Unchecked - no change or effect][3] -

http://ift.tt/1QUxjyG

[Second time the newly unchecked checkbox checked results in a Blank Screen]

http://ift.tt/1M4NbiX

help out pls! ASAP! thanks a mill!