Уникальный класс Div на JS

[VIVA]

Ребят, помогите, пожалуйста, решить проблему.

У меня есть 2 формы ввода текста и кнопка "Добавить". Мы указываем текст в полях для ввода, При нажатии кнопки "Добавить" в нижней части должна создаваться строка с указанными  в полях данными. Вот макап http://prntscr.com/aizxpi.

Подскажите, пожалуйста, как сделать, чтобы при нажатии кнопки "Добавить" созданный div имел уникальный класс (к примеру 1, 2, 3, 4 и т.д).

У меня есть вот такой рабочий код https://jsfiddle.net/jy876zm0/4/ . К сожалению все попытки решить вопрос через i++ не удается, у всех классов индекс 0 (создается <div class="task-text0">)

Ребят, подскажите, пожалуйста, как можно решить такую проблему, я явно туплю и не понимаю на каком этапе.

Edited March 23, 2016 by VIVA

[wwt]

А зачем уникальный класс? Может лучше класс один, а вот id уникальные? https://jsfiddle.net/yk8xbnvr/

Ну собственно заменить id на class не проблема.

 

UPD А 0 у вас всегда был потому что обработчик события при каждом нажатии на кнопку отрабатывал с начала, и каждый раз создавалась локальная переменная var i = 0;

Проверку на заполнение полей лучше делайте в начале функции обработчика, а то получается что вы сначала берете значения, создаете html код, занимая память, а только потом проверяете поля на заполненность и если они не заполнены ничего не делаете. Лучше делать вначале типо:

$("#save").click(function() {
	var newTask = $("#task").val();
	var newDate = $("#date").val();
  //делаем валидацию полей и если они не проходят валидацию возвращаем false
  if (newTask.length > 0 && newTask != " ") {	 
		return false;
  }


	//тут уже остальной код
	
	
  
});

 

[VIVA]

Спасибо большое!!!

Очень полезный прием с length. Оказалось, что все гениальное просто, но жаль не всегда очевидное.

Еще раз спасибо за помощь и за уделенное время!