Как правильно сделать подтверждение удаления записи из БД?

Код который удаляет, а перед удалением уточняет надо ли это:

//Delete product
	$(".delete-btn").one('click', function() {
		var rel = $(this).attr("rel")
		id  = $(this).data('id');
		$(".delete-product").click(function() {
			$("#deleteModal").modal("hide");
			$.ajax({
				type: "POST",
				url: rel,
				data: { id: id},
				dataType: "html",
				cache: false,
				success: function(data) {
					if(data == 'deleted')
					{
						location.reload();
					}
				} 
			});
		});

	});
	//Delete product

Код модального окна Bootstrap:

<!-- Modal -->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">Подтверждение удаления</h4>
					</div>
					<div class="modal-body">
						Вы действительно хотите удалить этот продукт?<br>
						После удаления восстановление будет невозможно! <br>
						Продолжить?
					</div>
					<div class="modal-footer" style="text-align: left;">
						<button type="button" class="btn btn-primary delete-product">Да</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Нет</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

Если просто сразу же удалять, то все отлично работает. Но если, к примеру, нажать удалить, далее появляется окно подтверждения, и не подтвердить, а просто поиграться и покликать по всем удалить и не подтверждать, то когда все таки пользователь решится на удаление, то удаляются все записи, которые были прокликаны. Как я понял, то когда нажимаем удалить, то обработчик срабатывает ровно то количество раз сколько было прокликано, при чем в нем уже храниться правильный id записи. Как уйти от этого?