Есть вот такой элемент, например.
<div>
<select>
<option disabled>Choose language</option>
{makeSelect(languages)} //делает большой список языков
</select>
<select>
<option>Low</option>
<option>Middle</option>
<option>Native</option>
</select>
<Component/>//вот кнопка, про поведение которой будет вопрос
</div>;
Подскажите, как мне реализовать следующее поведение кнопки:
1)При нажатии value кнопки меняется с "+" на "-" и значение "onClick", и обратно - примерно понимаю, как воплотить.
2) Кликнута, когда value="+": она отрисовывает после текущего дива/элемента, в котором находится, ещё один точно такой же (в данном примере рендерит ещё два select для отображения названия и уровня владения языка и такую же кнопку)
3) Работает не только в данном месте кода, но и в другом div'e, например:
//div с указанием имени института, специальности и дат начала и окончания учебы
<div><input placeholder="enter university's name" name="nameUniversity"/>
<input placeholder="enter speciality" name="nameSpeciality"/>
<select defaultValue="degree" name="educationDegree">
<option disabled>degree</option>
<option value='bachelor'>bachelor</option>
<option value='master'>master</option>
</select><br/>
<input type="date" required name="startDate"/>
<input type="date" required name="endDate"/>
<Component/>
</div>
- то есть, видимо, принимает в себя элемент, в котором находится?
4) Кликнута, когда value="-": удаляет этот элемент. Не с конца, а именно тот, который отрисовала эта данная кнопка
Долго думаю и читаю документацию, но не продвинулся, помогите кто чем может :-)
Простой
