Javascript-форум - clone() клонирует копируемые объекты

функция копирует клонированные объекты. Что делать? Объекты клонируются в определенной прогресси.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test job</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<style>
	.extremum-slide {
	display:none;
	}
	</style>
	<script type="text/javascript">
		$(function() {
		$('.extremum-click').toggle(function(){
		$(this).siblings(".extremum-slide").show();  
		}, function(){
	    $('.extremum-click').siblings(".extremum-slide").hide();  
		});
		});

		$(document).ready(function(){$("#button_add").click(function(){
		$("#table_add").clone().appendTo("#table_add");
		});
		});	

		$(document).ready(function(){$("#button_del").click(function(){
		$("#table_add div:last").remove();
		});
		});		
	</script>
   </head>
  <body>
	<div class="container-fluid">
	
				<div class="span8">
				<a href="#" class="btn btn-large btn-block extremum-click">Добавить</a>
				<div class="extremum-slide" id="table_add">
				<table class="table table-striped table-bordered">
				<tr><td>Наименование</td><td><input type="text" class="span8" name="title"></td></tr>
				<tr><td>Ф.И.О.</td><td><input type="text" class="span8" name="fio"></td></tr>
				<tr><td>Заказы</td><td><input type="text" class="span8" name="inn"></td></tr>
				</table>
				</div>
				<div class="extremum-slide">
				<a href="#" class="button25" id="button_add">+</a>
				<a href="#" class="button25" id="button_del">-</a>				
				</div>
				<a href="search.php" class="btn btn-large btn-block">Редактировать</a>
				<a href="search.php" class="btn btn-large btn-block">Поиск</a>
				</div>

	</div>
    </body>
</html>