How do I fix this calculator UI? (Javascript from code.org) I will explain down below

Question

Ok so this is my first program that I have ever done, and this was a side project that I am trying to do in my high school cs class. So I don't really know how to explain the problem that good, so here is the link to the code, and the program. https://studio.code.org/projects/applab/NXVTYdQ5srab3hWcx_ihgrR6qIDuYTnXYE3NfBxxMPQ

The problem that I have right now is that once you press one of the buttons, like basic math, and then press go back, and then press it again, it created a duplicate underneath it. How do I fix this?

Here is the code if you don't wanna go to the link: ( and please leave any suggestions)

  button("basicMath","BasicMath");
  button("Der/Int","d/dx/ ∫");
  button("QF","Quadratic Formula");

var total = 0;

write("IF USING 'd/dx' or '∫', first input = base number, second = exponent");
write("IF USING EXPONENTS then first input = base number, second = exponent");

  onEvent("basicMath", "click", function() {  // OPTIONS FOR MATH 
   setScreen("BasicMath");

  textInput("num1","0"); // TEXT INPUT
  textInput("num2","0"); // TEXT INPUT
  //textInput("num3","0"); // TEXT INPUT

  button("reset", "Go Back");

  textLabel("result",''); // Result
  textLabel("writing", '');
  textLabel("ansresult", "The Answer is: ");

  setPosition("ansresult", 0, 350, 150, 70);
  setPosition("result", 130, 350, 170, 70 );
  setPosition("writing", 130, 400, 170, 70 ); 

  button("clear","clear"); // clear  Button
  button("answer", "ans");
  button("plus","+"); // +  Button
  button("subract","-"); // -  Button
  button("multiply","*"); // *  Button
  button("divide", "/"); // /  Button
  button("exponent", "^"); // Exponent Button 

   onEvent("reset","click", function() {
    setScreen("OptionsScreen");
  });
 onEvent("clear","click", function() {
   total =  0;
  setText("result", total);
    setKeyValue("answer", total, function () {
  });
});

onEvent("answer","click", function() { // Recent Answer get back

  getKeyValue("answer", function (value) {
    setText("result", value);
    });
});

  var addition = onEvent("plus","click", function() {
  if (addition === true) {
    var num1 = getNumber("num1");
    var num2 = getNumber("num2");
    //var num3 = getNumber("num3");
      total =  num1 + num2; // + num3
  setText("result", total);
  } else {
      setText("writing","Error");
  }
  setKeyValue("answer", total, function () {
  });
});

 var subract = onEvent("subract","click", function() { // Subraction
  if (subract === true) {
  var num1 = getNumber("num1");
  var num2 = getNumber("num2");
  //var num3 = getNumber("num3");
      total =  num1 - num2; // num 3
  setText("result", total);
  } else {
      setText("writing", "Error");
  }
  setKeyValue("answer", total, function () {
  });
});

var multiply = onEvent("multiply","click", function() { // Multiply
  if (multiply === true) {
   var num1 = getNumber("num1");
    var num2 = getNumber("num2");
      total =  num1 *= num2;
  setText("result", total);
  } else {
      setText("writing", "Error");
  }
  setKeyValue("answer", total, function () {
  });
});

var divide = onEvent("divide","click", function() { // Division
  if (divide === true) {
   var num1 = getNumber("num1");
    var num2 = getNumber("num2");
      total =  num1 /= num2;
  setText("result", total);
  } else {
      setText("writing", "Error");
  }
  setKeyValue("answer", total, function () {
  }); 
});

var exponent = onEvent("exponent","click", function() { // Exponents
  if (exponent === true) {
   var num1 = getNumber("num1");
    var num2 = getNumber("num2");
      total =  Math.pow(num1,num2);
  setText("result", total);
  } else {
      setText("writing","Error");
  }
  setKeyValue("answer", total, function () {
    });
  });
});

  onEvent("Der/Int", "click", function() { // d/dx / INTEGRALS
    setScreen("Deriv/Inte");

  textInput("num3","0"); // TEXT INPUT
  textInput("num4","0"); // TEXT INPUT
  button("reset1", "Go Back");

  textLabel("result1",''); // Result
  textLabel("writing1", '');
  textLabel("ansresult1", "The Answer is: ");

  setPosition("ansresult1", 0, 350, 150, 70);
  setPosition("result1", 130, 350, 170, 70 );
  setPosition("writing1", 130, 400, 170, 70 ); 

  button("clear1","clear"); // clear  Button
  button("integral", "integral"); // Integral Button
  button("derivative", "d/dx"); // Derivative Button

    onEvent("clear1","click", function() { // CLEAR BUTTON
  total =  0;
  setText("result1", total);
  setText("writing1", '');
});

  onEvent("reset1","click", function() { // GO BACK BUTTON
    setScreen("OptionsScreen");
  });

  onEvent("integral","click", function() { // Simple Integration
    var num3 = getNumber("num3");
    var num4 = getNumber("num4");
    var exponentAdd = num4 += 1;  // Reverse power rule
    var exponentDivide = num3 /= exponentAdd ; // Reverse power rule
    var result = exponentDivide; 
    setText("result1", result + 'x' + exponentAdd); // (result + 'x' + exponentAdd);
    setText("writing1","The last number is the exponent");
});

onEvent("derivative","click", function() { // SIMPLE DERIVATIVES
    var num3 = getNumber("num3");
    var num4 = getNumber("num4");
    var exponentMultiply = num4 * num3; // POWER RULE
    var exponentSubract = num4 - 1; // POWER RULE
    var result = exponentMultiply;

if (num4 === 0) {
    setText("result", "0"); // FIND THE CONSTANT IF THE EXPONENT WILL BECOME 0 OR 1
  } else if (num4 === 1) {
    setText("result1", num3);
} else {
    setText("result1", result + 'x' + exponentSubract);
    setText("writing1","The last number is the exponent");
    } 
  });
});

  onEvent("QF","click", function() { // QUADRATIC FUNCTION
  setScreen("QuadF");

  textInput("a","0"); // TEXT INPUT
  textInput("b","0"); // TEXT INPUT
  textInput("c","0"); // TEXT INPUT

  button("reset2", "Go Back");
  button("clear2","clear"); // clear  Button

  textLabel("result2",''); // Result
  textLabel("writing2", '');
  textLabel("ansresult2", "The Answer is: ");

  setPosition("ansresult2", 0, 350, 150, 70);
  setPosition("result2", 130, 350, 170, 70 );
  setPosition("writing2", 130, 400, 170, 70 ); 

  button("quadraticFormula", "Quadratic Formula");

  onEvent("clear2","click", function() {

   total =  0;
  setText("result2", total);
  setText("writing2", '');
    setKeyValue("answer", total, function () {
  });
});
 onEvent("reset2","click", function() {
    setScreen("OptionsScreen");
    });

  onEvent("quadraticFormula","click", function() { 

    var a = getNumber("a");
    var b = getNumber("b");
    var c = getNumber("c");

    var discriminate1 =  Math.sqrt(Math.pow(b,2)-4*a*c); // SQRT(B^2 - 4(a)(c)

    var discriminate2 = -b + discriminate1;
    var discriminate3 = -b - discriminate1;
    var sol1 = discriminate2/2*a;
    var sol2 = discriminate3/2*a;
      setText("result2","x = " + sol1 + " x = " +sol2);
      setText("writing2", "IF X IS 'NaN' THEN NO REAL SOLUTION!");
  });
});

Answer 1

Your screen (input fields and buttons) are getting placed again and again. So, you have to see if there is a way to clear it first.

Whenever someone chooses an option from the menu, clear the screen and then build the screen again.

They might have some method like:

clearScreen("screen name");

Edit: As there is no clearScreen option, looks like you have to create all 4 screens one by one at the start itself. OnEvent you should only change the screen. So, the screens will get created only once and stay hidden.