function for deleting bookmarks won't work

Question

I've got a little problem here. I've made a little site bookmarker. Now I'm trying to add delete button so when I click delete button, site that I bookmarked would be deleted. I've made delete button but it stops working after I remove couple of sites. I mean it works but I need to add more and more clicks when I want to remove next site. I don't know what's the case here, can somebody explain me what's the problem? Thanks.

var button = document.getElementById('btn');
button.addEventListener('click', bookmark);

function bookmark(event) {
  var site = document.getElementById('siteName').value;
  var url = document.getElementById('siteUrl').value;
  var ul = document.getElementById('myUl');
  var li = document.createElement('form');

  li.setAttribute('id', 'formId');
  li.setAttribute('class', 'formClass');

  var siteANDurl = {
    siteName: site,
    siteUrl: url
  };

  var child = ul.appendChild(li);

  child.innerHTML = '<div class="well" id="div123">' +
    '<h3>' + site +
    ' <a class="btn btn-default" target="_blank" href="' + url + '">Visit</a> ' +
    ' <a onclick="deleteBookmark(\'' + url + '\')" class="btn btn-danger" href="#" id="lol">Delete</a> ' +
    '</h3>' +
    '</div>';

  event.preventDefault();
}

function deleteBookmark() {
  var ul = document.getElementById('myUl');
  var form = document.getElementById('formId');
  var child = ul.appendChild(form);
  child.style.display = "none";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="header clearfix">
    <nav>

    </nav>
    <h3 class="text-muted">Bookmarker</h3>
  </div>

  <div class="jumbotron">
    <h2>Bookmark Your Favorite Sites</h2>
    <form id="myForm">
      <div class="form-group">
        <label>Site Name</label>
        <input type="text" class="form-control" id="siteName" placeholder="Website Name">
      </div>
      <div class="form-group">
        <label>Site URL</label>
        <input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
      </div>
      <button type="submit" class="btn btn-primary" id="btn">Submit</button>
    </form>
  </div>
  <ul id="myUl"></ul>
  <div class="row marketing">
    <div class="col-lg-12">
      <div id="bookmarksResults"></div>
    </div>
  </div>

  <footer class="footer">
    <p>&copy; 2016 Bookmarker, Inc.</p>
  </footer>

</div>
<!-- /container -->