jQuery addClass example

Change class name on click in jQuery

HTML

<div class="form-box ingredients">
  <div class="add-list-box"></div>
  <div class="border-header">
    <span><a href="" class="add-list">Добавить еще список</a></span>
  </div>
</div>

CSS

/* - Блок добавить ингредиенты- */

.ingredient_box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.form-box.ingredients {
  position: relative;
  margin: 50px 0 20px;
  padding-bottom: 5px;
  border-radius: 0;
  z-index: 1;
}

.form-box.ingredients::after {
  z-index: -1;
  transform: scaleX(1.082);
  box-sizing: border-box;
}

@media only screen and (max-width:780px) {
  .form-box.ingredients::after {
    transform: scaleX(1.2);
  }
}

.form-box.ingredients .add-list-box .form-box-cont {
  display: flex;
  align-items: center;
  padding: 5px 0 10px;
}

.ingredient_box td:nth-child(2),
.form-box-ingrid {
  flex-grow: 1;
}

.form-box-ingrid input {
  width: 100%;
}

.form-box.ingredients .add-list-box .form-box-inp input {
  max-width: 70px;
  width: 100%;
  margin-left: 10px;
}

.form-box.ingredients .add-list-box .ingredient-cont_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 20px;
}

.form-box.ingredients .add-list-box .form-table input {
  flex-grow: 1;
}

.ingredient-cont_item .title-Group {
  padding: 10px 30px 10px 0;
}

@media only screen and (max-width:480px) {
  .form-box.ingredients .add-list-box .form-box-inp input {
    width: 42%;
  }
}

.title-Group {
  padding-right: 30px;
  line-height: 1.2;
  font-size: 13px;
}

.form-box.ingredients .add-list-box .form-table .td-comment {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: #878787;
}

.form-box.ingredients .border-header {
  border-bottom: 1px dotted #c5c5c5;
  text-align: center;
  margin: 0 0 25px;
}

.form-box.ingredients .border-header span {
  padding: 0 20px;
  background: #f8f8f8;
  display: inline-block;
  bottom: -13px;
  position: relative;
  font-size: 17px;
}

.form-box.ingredients .add-list {
  display: inline-block;
  position: relative;
  color: #2a82c5;
  font-style: normal;
  height: 23px;
  line-height:...

JavaScript

function addIngredient(group, name, value, unit){
	name = name || '';
	value = value || '';
	unit = unit || '';
	var id = ++ingredientsCount;
	var groupId = group.data('id');
	var rowCount = group.find('tr').length;
	var inputHTML = '<tr class="ingredient_box"><td>' + (rowCount < 0 ? 'Название ингредиента <span style="color:red;">*' : '') + '</td><td><div class="form-box-cont">' +
		'<div class="form-box-ingrid"><input type="text" placeholder="Название ингредиента" id="ingred' + id + '" name="ingred_group[' + groupId + '][ingredient][' + id + '][name]" value="' + name + '"></div>' +
		'<div class="form-box-inp"><input type="text" placeholder="Кол-во" name="ingred_group[' + groupId + '][ingredient][' + id + '][value]" value="' + value + '">' +
		'<input type="text" placeholder="Ед.Изм." id="unit' + id + '" name="ingred_group[' + groupId + '][ingredient][' + id + '][unit]" value="' + unit + '">' +
		'</div></div></td>' +
		(rowCount >= 2 ? '<td class="td-comment"><a href="javascript:void(0)" class="inp-close" title="Удалить список">x</a>' :
			'<th class="td-comment td-comment-pad">') +
		'</tr>';
	group.find('.ingredient-cont').append(inputHTML);

}

function delIngredient(){
	$(this).parents('tr').remove();
	return false;
}

function addGroup(name){
	name = name || '';
	groupsCount++;
	var id = groupsCount;
	var html = '<div class="group-wrap" data-id="{id}"><div class="border-header"><span>{title}</span></div> \
        <div class="form-table ingredient-cont"><div class="ingredient-cont_item"><div class="title-Group">Для чего ингредиенты <span class="td-comment">Например: <a href="javascript:void(0)">Для соуса</a></span></div><input type="text" name="ingred_group[{id}][name]" value="{name}"> \
        </div></div></div>';
	if (groupsCount == 1) {
		html = html.replace(/\{title\}/, 'Добавить ингредиент');
	} else {
		html = html.replace(/\{title\}/, 'Дополнительный список <a href="javascript:void(0)" class="close-block" title="Удалить список">x</a>');
	}
	html =...