Help fix my wikipedia API project pretty please (p5js).

banana

I want to create something like this: https://codepen.io/freeCodeCamp/full/wGqEga.

First when I type something I have to click twice (for some reason) for searches to appear. Then if I type something else and click the button more searches will show but does not erase the previous searches. Idk if I need to use noLoop(), draw(), etc.

Here is my code:

<h1> Wikipedia Viewer </h1>
<p> Welcome to my Wikipedia search tool </p>

<input type="text" id="tf"> 
<button type="button" id="btn"> Search </button> 
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"> /b </a>

var wiki;
var input;

function setup() {
  noCanvas();
  
  input = select('#tf');
  var btn = select('#btn').mousePressed(search);
  
  noLoop();
}

function search() {
  var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=';
  url += input.value();
  loadJSON(url, gotData, 'jsonp');
  redraw();
}

function gotData(data) {
  wiki = data;
}

function draw() {
  if (wiki) {
    // console.log(wiki[1].length);
    for (var i = 0; i < wiki[1].length; i++) {
      createElement('h1', wiki[1][i]);
    }
  }
}

banana

I found out how to remove elements created with p5

  if (wiki) {
    removeElements();
    for (var i = 0; i < wiki[1].length; i++) {
      createElement('h1', wiki[1][i]);
    }
  }

Now I need to find out why I need to click button twice to make it work.