Hello. The question is this. There is a button and a tag with your own. When you click on the button, a new one appears. When you select a specific right select, a certain type of input appears, indicated by option. It turns out a list of select and input.

enter image description here

Now the question. How to make so that when changing the old selected select, the necessary input is changed, which is to the right of it? And instead, the input is added at the very top.

function addField() { $('#props').prepend('<div id=\"fields\">\ <select onchange=\"addchange()\" class=\"options\" name=\"Tovar[name]\" id=\"Tovar_name\">\ <option selected=\"true\" disabled=\"disabled\">Выберите свойство</option>\ <option data-type=0>Первое</option>\ <option data-type=1>Второе</option>\ <option data-type=2>Третье</option>\ </select>\ </div>\ <div id=\"change\" ></div><br>'); } function addchange(){ var orange = $('.options option:selected').attr('data-type'); switch (orange){ case "0": $('#change').append('<input type=\"number\" name=\"browser\" value=\"0\" min=\"0\" step=\"1\">'); break; case "1": $('#change').append('<input type=\"text\" name=\"browser\" >'); break; case "2": $('#change').append('<input type=\"checkbox\" name=\"browser\" >'); break; default : $('#change').append('<p>Нет типа свойства</p>'); break; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="required">Свойства</label> <div id="props"> </div> <a href="#" onclick="addField()">Добавить поле</a>

    1 answer 1

    replace append with html , append appends to the end of element content, prepend adds element to the beginning, html replaces element content

      function addField() { $('#props').prepend('<div id=\"fields\">\ <select onchange=\"addchange()\" class=\"options\" name=\"Tovar[name]\" id=\"Tovar_name\">\ <option selected=\"true\" disabled=\"disabled\">Выберите свойство</option>\ <option data-type=0>Первое</option>\ <option data-type=1>Второе</option>\ <option data-type=2>Третье</option>\ </select>\ </div>\ <div id=\"change\" ></div><br>'); } function addchange(){ var orange = $('.options option:selected').attr('data-type'); switch (orange){ case "0": $('#change').html('<input type=\"number\" name=\"browser\" value=\"0\" min=\"0\" step=\"1\">'); break; case "1": $('#change').html('<input type=\"text\" name=\"browser\" >'); break; case "2": $('#change').html('<input type=\"checkbox\" name=\"browser\" >'); break; default : $('#change').html('<p>Нет типа свойства</p>'); break; } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="required">Свойства</label> <div id="props"> </div> <a href="#" onclick="addField()">Добавить поле</a>

    • Thank you, but still the problem is that it normally only changes the last element, that is, the topmost one, and those that are lower do not change it at all. - Alexey Komzarev