Changing text into an input and then back again on deselection

I have a button, when i click it, i transform its sibling into an input containing the text that it once held.

This works fine.

However, upon deselection of the input, I require it to go back to being text again, but the issue is, the const variable is being overwritten somehow?

Anyway, here is my current HTML and JS:

$(function() {
  $(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) {
    e.preventDefault();

    const $this = $(this),
      text = $this.parent().parent().find("td.link").text();

    $this.parent().parent().find("td.link").html(`<input type="text" class="form-control" value="${text}">`);

    $this.parent().parent().find("td.link input").select();

    if ($this.parent().parent().find("td.link input").blur()) {
      $this.parent().parent().find("td.link").html(text);
    }
  });

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th class="title">link name</th>
      <th class="title">Platform</th>
      <th class="title">Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="body-text" scope="row">1</th>
      <td class="body-text">Mark</td>
      <td class="body-text link">Otto</td>
      <td class="body-text"><a href="#" class="copy-btn">Copy</a>
      </td>
      <td class="body-text"><a href="#" class="more-btn">More</a>
      </td>
    </tr>
    <tr>
      <th class="body-text" scope="row">1</th>
      <td class="body-text">Otto</td>
      <td class="body-text link">Mark</td>
      <td class="body-text"><a href="#" class="copy-btn">Copy</a>
      </td>
      <td class="body-text"><a href="#" class="more-btn">More</a>
      </td>
    </tr>
  </tbody>
</table>