悬停事件不会影响before方法添加的元素

Question

我想创建一个添加和删除行的表。但是，我遇到了问题。当我插入新行时，将鼠标悬停在右侧没有出现框选项。

Link Demo

var options = '<div class="add delete">Delele</div>' +
  '<div class="add insert_before">Add	&uarr;</div>' +
  '<div class="add insert_after">Add &darr;</div>'
$('.option').append(options);

$('td').wrapInner('<input type="text"/>');

$('tr').mouseleave(function() {
  obj = $(this)
});

$('.delete').click(function() {
  obj.remove()
});

row = '<tr>' +
  '<td class="name"></td>' +
  '<td class="data"></td>' +
  '<td class="edit"></td>' +
  '<td class="trash"></td>' +
  '</tr>'

$('.add.insert_before').click(function() {
  obj.before(row);
  obj.prev().children('td').wrapInner('<input type="text"/>');
});


$('tbody tr').hover(function() {
  top = $(this).position().top;
  $('.option').toggleClass('show').css({
    'margin-top': top
  });
});

.main {
  display: flex
}

.content {
  max-width: 700px;
}

thead {
  background: #f2f2f2;
}

th,
td {
  padding: 10px;
}

tbody {
  background: #f5f5f5
}

input {
  outline: none;
  border: none;
  padding: 6px;
  background: none;
  width: 92%;
}

tr:hover {
  background: red !important;
}

input:focus {
  border: solid 1px #bebebe
}

.option {
  visibility: hidden
}

.option:hover {
  visibility: visible;
}

.option.show {
  visibility: visible;
}

.add {
  display: inline-block;
  width: 50px;
  background: #f5f5f5;
  padding: 10px;
  margin: 0 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="content">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Email</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="name">Doe, John</td>
          <td class="data">Sample Data</td>
          <td class="edit">edit</td>
          <td class="trash">delete</td>
        </tr>
        <tr>
          <td class="name">Smith, Jane</td>
          <td class="data">Another Sample</td>
          <td class="edit">edit</td>
          <td class="trash">delete</td>
        </tr>
        <tr>
          <td class="name">T, Mister</td>
          <td class="data">Samples are Best in Threes.</td>
          <td class="edit">edit</td>
          <td class="trash">delete</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="option"></div>
</div>

谁有答案可以帮助我？谢谢！