Добавить элемент под элементом, который был нажат

Question

Я работаю над тем, чтобы текстовое поле отображалось под измененным элементом. Когда пользователь проверяет флажок, я хочу, чтобы текстовое поле отображалось под этим флажком и удаляло все элементы. Как это сделать? Сейчас он просто добавляет текстовое поле в нижней части div. Я включил скрипку HERE

Это код, я использую, чтобы добавить текстовое поле:

function displayDate(dateBox) { 
    if($('#' + dateBox + "Date").length) { 
     $('#' + dateBox + "Date").remove(); 
    } else { 
     var input = document.createElement("input"); 
     input.type = "text"; 
     input.id = dateBox + "Date"; 
     input.name = dateBox + "Date"; 
     document.getElementById("displayingDealers").appendChild(input); 
    } 

} 

Здесь контейнер:

<fieldset class="wideFieldSet"> 
    <div id="displayingDealers"> 
    <legend>Displaying Dealer Details</legend>  
     <p>What products do you have on display?</p> 
     <p><label class="wideLabel" for="93057">93057</label><input class="floatLeftCheckbox" type="checkbox" id="93057" name="displayingdealerdetails[93057]" onchange="displayDate(this.id)"/></p> 
     <p><label class="wideLabel" for="93058">93058</label><input class="floatLeftCheckbox" type="checkbox" id="93058" name="displayingdealerdetails[93058]" onchange="displayDate(this.id)" /></p> 
     <p><label class="wideLabel" for="93107">93107</label><input class="floatLeftCheckbox" type="checkbox" id="93107" name="displayingdealerdetails[93107]" onchange="displayDate(this.id)" /></p> 
     <p><label class="wideLabel" for="93108">93108</label><input class="floatLeftCheckbox" type="checkbox" id="93108" name="displayingdealerdetails[93108]" onchange="displayDate(this.id)" /></p> 
     <p><label class="wideLabel" for="93117">9311</label><input class="floatLeftCheckbox" type="checkbox" id="93117" name="displayingdealerdetails[93117]" onchange="displayDate(this.id)"/></p> 
     <p><label class="wideLabel" for="93118">93118</label><input class="floatLeftCheckbox" type="checkbox" id="93118" name="displayingdealerdetails[93118]" onchange="displayDate(this.id)" /></p> 
     <p><label class="wideLabel" for="93085">93085</label><input class="floatLeftCheckbox" type="checkbox" id="93085" name="displayingdealerdetails[93085]" onchange="displayDate(this.id)"/></p> 
     <p><label class="wideLabel" for="EOH51294">EOH51294</label><input class="floatLeftCheckbox" type="checkbox" id="EOH51294" name="displayingdealerdetails[EOH51294]" onchange="displayDate(this.id)" /></p> 

     <p><label for="OtherText">If other please explain</label><input type="text" name="displayingdealerdetails[OtherText]" id="OtherText" /></p> 

     <p class="navigation"><button class="button" type="button" onclick="prevForm();">Previous</button>                        
           <button class="button" type="button" onclick="nextForm();">Next</button></p> 

    </div> 
</fieldset> 

Answer 1

Вам необходимо добавить текстовое поле для каждого пункта , Вот модифицированная версия коды JS:

function displayDate(dateBox) { 
    if($('#' + dateBox + "Date").length) { 
     $('#' + dateBox + "Date").remove(); 
    } else { 
     var input = document.createElement("input"); 
     input.type = "text"; 
     input.id = dateBox + "Date"; 
     input.name = dateBox + "Date"; 
     $('#'+dateBox).parent().append(input); 
    } 

} 

Также у меня есть обновленная скрипка: fiddle

Answer 2

.insertAfter() и .after() оба могут добиться того, что вы ищете. Единственное отличие заключается в их синтаксис:

$("<p>Test</p>").insertAfter(".inner"); 
$(".inner").after("<p>Test</p>"); 
// Both of the above lines do the same thing; you would use one, not both 
... 
<div class="container"> 
    <h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <div class="inner">Goodbye</div> 
</div> 

Результат:

<div class="container"> 
    <h2>Greetings</h2> 
    <div class="inner">Hello</div> 
    <p>Test</p> 
    <div class="inner">Goodbye</div> 
    <p>Test</p> 
</div>