Ошибка в коде - добавления блока с выпадающими списками
 

Добрый день, пытаюсь написать код, но пока никак не получается, уже не знаю как быть... сам я новичок, поэтому очень надеюсь на вашу помощь. Если есть у кого соображения, поделитесь...
Суть вот в чем:
На вложенном рисунке я показал чего хочу добиться.
Есть два выпадающих списка и кнопка "add". При нажатии на неё в низу должно появляться точно такое же, но с кнопкой "del" и так 10 штук и соответственно при нажатии этой кнопки списки выпадающий должны исчезать.
И все это находится в тегах <table></table>. Слева от списков находятся названия их. (на рисунке не показана)
вот что я сам написал, но ничего не работает.
JS

$(function(){
$('.add').click(function(){
$('boxLevel').show();	
});
$(function(){
$('.del').click(function(){
$('boxLevel').hide();	
}); 
}); 
});

HTML

<div id="boxLevel">
<select name="name" id="name"">
<option value="1">1</option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
-
 <select name="family" id="family">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<span class="add"><a href="">add</a></span>
</div>

И не будет, т.к. куча ошибок. Во-первых, что за $('boxLevel')? Решетка где? Во-вторых, секция $('.del').click(...) не сработает хотя бы потому, что у вас нет такого элемента.

Вам нужно при клике на add дублировать ваши два селекта и при этом нужно менять id копий, т.к. на странице не может быть двух элементов с одним id. При клике на del удалять строку.

Cо всеми ошибками я разобрался, спасибо.
При нажатии "add" у меня добавлят сразу столько строк, сколько изначально было написано в html'е и спрятано, путем CSS ( "display:none" ).
А как сделать, чтобы при каждом нажатии добавляась только одна строчка... ? Нужно прописывать какое-то условие?

В том коде, что у вас приведен выше, вы вообще ничего не добавляете. Вы показываете/скрываете имеющиеся. Попробуйте именно создавать новые элементы. Например, с помощью clone

Посоветовали этот вариант, но тоже так и не заработал...

row = $('<div class="boxLevel">
  <select name="name" id="name"">
  бла-бла-бла
  <span class="delete"><a href="">delete</a></span>
  </div>');
  
row.find('.delete').click(function(){
  $(this).closest('.boxLevel').remove();
  return false;
});
 
$('.add').click(function(){
  $(<во что вставить>).append(row.clone());
  return false;
});

row = $('<div class="boxLevel">
  <select name="name" id="name"">
  бла-бла-бла
  <span class="delete"><a href="">delete</a></span>
  </div>');
  
row.find('.delete').click(function(){
  $(this).closest('.boxLevel').remove();
  return false;
});
 
$('.add').click(function(){
  $('.sometable .elements-con').append(row.clone());
  return false;
});

Код сам рабочий, но почему то при нажатии delete - убирает все списки выпадающие, а не только то что напротив...
в чем может быть причина, подскажите.