javascript - JQuery Button to Show and Button to Hide -

i have list of button table (table1) if clicked button, append table (table2), , button hide. @ table2, there's button remove/delete table2 , button @ table1 displayed again. here's code far:

var rownum = 0;  $('.addrow').on('click', function () {          rownum++;          var barang = $(this).parent().find("input[name='rfdn']").val();          var barangid = $(this).parent().find("input[name='rfdid']").val();          var price = $(this).parent().find("input[name='rfdp']").val();          var harga = $(this).parent().find("input[name='rfdpx']").val();          var qty = $(this).parent().find("input[name='rfdq']").val();            var row = '<tr id="rownum' + rownum + '">';          row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';          row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';          row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';          row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removerow(' + rownum + ')"><i class="fa fa-minus fa-fw"></i> delete</a></td></tr>';          jquery('#refunds2').append(row);          $(this).hide();      });        function removerow(rnum) {          jquery('#rownum' + rnum).remove();          rownum--;          $(this).show();      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <table class="list">  	<thead>  		<tr>  			<td>product</td>  			<td>refund</td>  			<td>model</td>  			<td>quantity</td>  		</tr>  	</thead>  	<tbody>  		<tr>  			<td class="left">flesh out</td>  			<td class="center">  				<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">  				<input type="hidden" class="rf" value="flesh out" id="rfdn" name="rfdn">  				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">  				<a class="button addrow">refund</a>  			</td>  			<td class="left">9786023759774</td>  			<td class="right">1</td>  		</tr>  		<tr>  			<td class="left">#about love</td>  			<td class="center">  				<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">  				<input type="hidden" class="rf" value="#about love" id="rfdn" name="rfdn">  				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">  				<a class="button addrow">refund</a>  			</td>  			<td class="left">9786020317786</td>  			<td class="right">1</td>  		</tr>  	</tbody>  </table>  <table id="refunds2" class="list">      <thead>          <tr>              <td class="left">product</td>              <td>refund qty</td>              <td>price</td>              <td></td>          </tr>      </thead>  </table>

to append new row it's worked. when click delete button, 'refund' button @ table1 isn't coming again. data may various, not 2. can 5 or 10 or maybe 100

the rownum adding should related addrow button hidden. after deleting know button correponded to.

see code below. have added bootstrap styling purposes.

var rownum = 0;  $('.addrow').on('click', function () {          rownum = $('.addrow').index(this);          var barang = $(this).parent().find("input[name='rfdn']").val();          var barangid = $(this).parent().find("input[name='rfdid']").val();          var price = $(this).parent().find("input[name='rfdp']").val();          var harga = $(this).parent().find("input[name='rfdpx']").val();          var qty = $(this).parent().find("input[name='rfdq']").val();            var row = '<tr id="rownum' + rownum + '">';          row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';          row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';          row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';          row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removerow(' + rownum + ')"><i class="fa fa-minus fa-fw"></i> delete</a></td></tr>';          jquery('#refunds2').append(row);          $(this).hide();      });        function removerow(rnum) {          jquery('#rownum' + rnum).remove();          $('.addrow').eq(rnum).show();      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    <table class="list table">  	<thead>  		<tr>  			<td>product</td>  			<td>refund</td>  			<td>model</td>  			<td>quantity</td>  		</tr>  	</thead>  	<tbody>  		<tr>  			<td class="left">flesh out</td>  			<td class="center">  				<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">  				<input type="hidden" class="rf" value="flesh out" id="rfdn" name="rfdn">  				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">  				<a class="button addrow">refund</a>  			</td>  			<td class="left">9786023759774</td>  			<td class="right">1</td>  		</tr>  		<tr>  			<td class="left">#about love</td>  			<td class="center">  				<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">  				<input type="hidden" class="rf" value="#about love" id="rfdn" name="rfdn">  				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">  				<a class="button addrow">refund</a>  			</td>  			<td class="left">9786020317786</td>  			<td class="right">1</td>  		</tr>  	</tbody>  </table>  <table id="refunds2" class="list table">      <thead>          <tr>              <td class="left">product</td>              <td>refund qty</td>              <td>price</td>              <td></td>          </tr>      </thead>  </table>