JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<div id="accordion">
     <h3>Section 1</h3>

    <div id='myDiv1'>
        <input type="text" name="text1" id="text1">
    </div>
</div>
<input type="button" onclick="pressMe()" value="Add more Nodes">
<input type="button" onclick="printAll()" value="printAll">
<div>
    <div id='temp'>
        <input type="text" name="text1" id="id_text">
    </div>
</div>

JavaScript

$(function () {
    $("#accordion").accordion();
});

var i = 1;

function pressMe() {
    var h3 = document.createElement("h3"),
        div = document.createElement("div");
    h3.appendChild(document.createTextNode('Section 4'));
    div.appendChild(document.createTextNode('Saurabh'));

    // note the reverse order of adding child        
    h3.appendChild(div);

    //document.getElementById('accordion').appendChild(h3);
    //$( "#accordion" ).accordion();
    $("#accordion").append('<h3>Section ' + ++i + '</h3><div id=\'myDiv' + i + '\'>' + document.getElementById('temp').innerHTML + '</div>');
    $("#accordion").accordion("refresh");
}

function hide() {
    document.getElementById('temp').style.display = "none";
}

function printAll() {
    for (temp = 2; temp <= i; temp++) {
        alert(document.getElementById('myDiv' + temp).querySelector('#id_text').value);
    }
}

window.onload = hide;