Add and remove html element by jquery

How can I add new <tr> after a clicked <tr>. On click of this <tr> and remove now created when click other <tr> (with repeat 1st scenario) by jQuery?

I tried like this, but it does not work:

$("#test_table tr").click(function() {
  $(this).prev().remove();
  $(this).closest('tr').append('<tr><td>2.2</td></tr>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>