как сделать динамическое поле ввода другой опции в цикле while или foreach

Question

привет, у меня проблема с динамическим добавлением поля ввода для каждого выбора с опцией "other".

, если пользователь щелкает опцию, имеет значение other, поле ввода добавляет или добавляет под выбором перед следующим вопросом.

<label>question 1</label>
<select>
 <option>op1</option>
 <option>op3</option>
 <option>other</option>
</select>

<label>question 2</label>
<select>
 <option>op1</option>
 <option>op3</option>
</select>
<label>question 3</label>
<select>
 <option>op1</option>
 <option>op3</option>
 <option>other</option>
</select>
<label>question 4</label>
<select>
 <option>op1</option>
 <option>op3</option>
 <option>other</option>
</select>

мой код:

<form class="" style="padding:15px;" method="POST" action="action/survey" id="form">
               <?php 
                while ($data = mysqli_fetch_array($sql)){
                 $i; 
                $q_ID = $data[0];
                $sql1 = mysqli_query($con,"SELECT GROUP_CONCAT(answer) AS `option`
              FROM `survey_anweroptions` WHERE survey_qID = $q_ID");
                $data1 = mysqli_fetch_array($sql1);
                $question =  $data['question'];
                $option = $data1['option'];
                $option = explode(",",$option);
                ?>

                <div class="form-group">
                  <label for=""><?php echo  $i.".) ".$question ?> </label>
                  <select class="form-control" name="answer[]" id="answer-option">
                    <?php 
                     foreach ($option as $key => $value) {
                     ?>
                      <option value="<?php echo $value?>"><?php echo $value ?></option>
                     <?php
                    }
                    ?>
                  </select>
                </div>
                //add this when the option click as other
                <div class="form-group hidethis" >
                     <label for="">Other</label>
                     <input type="text" name="">
                </div>
                //end
                <?php
                $i++;
              }
                ?>
                <button type="submit" class="" name="submit-survey">Submit</button>
         </form>

результат динамического вопроса: я хочу это выглядеть так:

Answer 1

Не забудьте прикрепить jQuery lib

Создать вход и скрыть его:

<label>question 1</label>
<select id="q1">
 <option>op1</option>
 <option>op3</option>
 <option value="other">other</option>
</select>
<input type="text" id="q1i" style="display:none;">

И сценарий:

<script>
    $('#q1').change(function(){
        if($(this).val() == 'other'){
            $('#q1i').css("display","block");
        }else{
            $('#q1i').css("display","none");
        }
    });
</script>

И версия для «тысяча или миллион избранных»

<label>question 1</label>
<select id="q1" class="billions">
 <option>op1</option>
 <option>op3</option>
 <option value="other">other</option>
</select>
<input type="text" id="q1i" style="display:none;">
<br>
<br>
<label>question 2</label>
<select id="q2" class="billions">
 <option>op1</option>
 <option>op3</option>
 <option value="other">other</option>
</select>
<input type="text" id="q2i" style="display:none;">


<script>
    $('.billions').each(function() {
        $(this).change(function(){
        if($(this).val() == 'other'){
            $('#'+$(this).attr('id')+'i').css("display","block");
        }else{
            $('#'+$(this).attr('id')+'i').css("display","none");
        }
        });
    });
</script>