How do I edit a td after I have clicked my edit button in JavaScript?

Question

I am working on a oop project that I want to use after for my self and add to my portfolio. I'm also using it as a learning project as I'm new to oop. In this project I want to be able to edit the added td fields that are submitted to the bottom table. when I try to create input element and then append the input to the submitted items it just creates input boxes next to the tds.

(Update I have now got it to edit the first td item I'm just now working on updating the edit after clicking enter or adding a ok button to the app.)

This is my html css and js:

// this is the es5 way to do it with constructors and prototypes
// keyword constructor

function Keyword(sitename, keyword, keywordpost) {
  this.sitename = sitename;
  this.keyword = keyword;
  this.keywordpost = keywordpost;
}



// UI Constructor is the things assosiated to the ui different prototypes and methods
function UI() {

}
// this is the UI prototype for the above UI constructor
UI.prototype.addKeywordToList = function(keywordNames) {
  const list = document.getElementById('keyword-list');
  // create tr element
  const row = document.createElement('tr');
  // insert cols
  row.innerHTML = `
    <td>${keywordNames.sitename}</td>
    <td>${keywordNames.keyword}</td>
    <td>${keywordNames.keywordpost}</td>
    <td><a href='#' class="delete">X</a></td>
    <td><a href='#' class="edit">edit</a></td>
    `;
  console.log(row);
  console.log(list);



  list.appendChild(row);
}
// start here on monday or tuesday ------------------------------------------------------
// show alert
UI.prototype.showAlert = function(message, className) {
  //create div
  const div = document.createElement('div');
  // add class
  div.className = `alert ${className}`;
  // add text
  div.appendChild(document.createTextNode(message));
  // Get parent
  const container = document.querySelector('.input-container');
  const form = document.querySelector('#keyword-form');
  //insert alert box/message above the form
  container.insertBefore(div, form);
  // Timeout after 3 secs
  setTimeout(function() {
    document.querySelector('.alert').remove();
  }, 3000);
}


// clear fields of there input
UI.prototype.clearFields = function() {
  document.getElementById('website-name').value = '';
  document.getElementById('keyword-name').value = '';
  document.getElementById('keyword-post').value = '';
}

//prototype to delete item
UI.prototype.deleteBook = function(target) {
  if (target.className === 'delete') {
    target.parentElement.parentElement.remove();

  }
}

//prototype to edit book -------- working on this here updated now edits element but just need save the update
UI.prototype.editBook = function(target) {


  if(target.className === 'edit'){
    const firstItem = document.querySelector('td');
    const input = document.createElement('input');
    firstItem.innerHTML = '';
    input.type = 'text';
    firstItem.appendChild(input);


    console.log(firstItem);



  }

}


// Event Listeners

document.getElementById('keyword-form').addEventListener('submit', function(e) {
  // get form values
  const siteName = document.getElementById('website-name').value
  const keywordName = document.getElementById('keyword-name').value
  const keywordPost = document.getElementById('keyword-post').value


  //instantiate a book creating a new one based of the Keyword object constructor ---------------------------
  const keywordNames = new Keyword(siteName, keywordName, keywordPost);


  //instantiate UI object ----------------------------------------------------

  const ui = new UI();

  //create validation to stpp crosses being submited on a line when there is nothing to submit
  if (siteName === '' || keywordName === '' || keywordPost === '') {
    ui.showAlert('please fill in all fields', 'error');
  } else {
    ui.addKeywordToList(keywordNames);
    ui.clearFields();
    ui.showAlert('Your item has been added', 'success');
  }


  console.log('test');

  e.preventDefault();
});



//event listener for delete
document.getElementById('keyword-list').addEventListener('click', function(e) {
  console.log(123);

  //instatiate ui again beceuse we outside of above function
  const ui = new UI();


  ui.deleteBook(e.target);
  ui.showAlert('Your item has been removed', 'success');



  e.preventDefault();
});



//event listener for editing the table items --------- working on this here
document.getElementById('keyword-list').addEventListener('click', function(e) {


  const ui = new UI();

  ui.editBook(e.target);

  e.preventDefault();
});

* {
  margin: 0;
  box-sizing: border-box;
}

.main-container {
  width: 100%;
  height: 100vh;
}

.input-container {
  display: flex;
  height: 50%;
  width: 90%;
  margin: auto;
  flex-direction: column;
  justify-content: space-around;
}

.inputContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
}

#keyword-form {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
  /* padding-top: 6px; */
  height: 90%;
}

.input {
  padding: 10px;
}

.submit-button {
  padding: 10px;
  width: 120px;
}

.output-table {
  width: 100%;
}

tr {
  text-align: center;
}

.success,
.error {
  color: white;
  padding: 5px;
  margin: 5px 0 15px 0;
}

.success {
  background: green;
}

.error {
  background: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>


  <div class="main-container">

    <div class="input-container">
      <h1>Seo Keyword Tracker</h1>
      <form id="keyword-form">
        <div class="inputContainer">
          <label for="Website-Name">Website Name</label>
          <input class="input one" id="website-name" type="text" placeholder="keyword">
        </div>
        <div class="inputContainer">
          <label for="Keyword-Name">Keyword Name</label>
          <input class="input two" id="keyword-name" type="text" placeholder="keyword">
        </div>
        <div class="inputContainer">
          <label for="Keyword-Site-Number">Keyword Post Title</label>
          <input class="input three" id="keyword-post" type="text" placeholder="keyword">
        </div>
        <div class="inputContainer">
          <input class="submit-button" id="Keyword-Site-Name" type="submit" placeholder="keyword">
        </div>
      </form>
    </div>

    <hr>
    <table class="output-table">
      <thead>
        <tr>
          <th>Website Name</th>
          <th>Keyword Name</th>
          <th>Keyword Post Title</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="keyword-list"></tbody>
    </table>


  </div>




  <script src="app.js"></script>
  <script src="appes6.js"></script>
</body>

</html>

Ok so if you run snippet you will see the input boxes that I mentioned also when I inspect element they seem to me creating a new tr and then the inputs outputting within that. I'm not sure were I'm going wrong i thought maybe i could grab the td by class or id but they do not have class and ids as there created dynamically. I thought maybe grabbing the innerHTML fields used in the (add) prototype one and add that into the (edit) prototype one.

(Update i have now got it to edit the first td item I'm just now working on updating the edit after clicking enter or adding a ok button to the app.)

So if anyone could help it would be greatly appreciated based on my update this post.

Many Thanks