Я пытаюсь сделать, чтобы сделать форму. Данные, вставленные во входные данные, должны заполнять текст автоматически. Эта форма будет включать дерево решений. Каждый ответ покажет новые вопросы и так далее.
Я пытался добавить элементы div в соответствии с выбранным переключателем (jquery), но у меня возникают проблемы, когда я пытаюсь перейти к все большему количеству вопросов (большему и более сложному дереву решений).
Как я могу это сделать и сделать его масштабируемым? Любой ваш код или полезные ссылки были бы хороши.
Вот фрагмент, чтобы показать вам идею
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toadd">
<p>1. Do you have a dog?</p>
<label>Yes</label><input type="radio" class="first" name="something" />
<label>No</label><input type="radio" class="second" name="something" />
<p><b>1.1</b> (* If you have a pet) How did you get it?</p>
<label>It was a gift</label><input type="radio" class="first" name="something1" />
<label>I bought it</label><input type="radio" class="second" name="something1"/>
<p>1.1.1 (* If it was a gift) Who have it yo tou?</p>
<input type="text" class="first" />
<p>1.1.2 (* If you bought it) Where did you buy it?</p>
<input type="text" class="first" />
<p><b>1.2.</b> (* If no pet) Why dont you have a pet?</p>
<input type="text" class="first" />
<p>---</p>
<p>Acordding to options, next text will be completed (preferably appeding p's )</p>
<p>You have a pet / You don't have a pet</p>
<p>It was a gift / You bought it</p>
<p>XXX gave it to you / You bought it at XXX</p>
<p>...</p>
<span class="pet"></span>
</div>