I have a form where the structure is formed by an organized list
<ul>
<li id="pai">
<input type="text"><button class="ul-appending">Add Input</button>
<ul>
<li>
<input type="text"><button class="ul-appending">Add Input</button>
</li>
</ul>
</li>
</ul>
Fields are added dynamically following the listing structure. But at the end when the form is sent, follow this order of listings with the results in a textarea. Is it possible?
$('body').on('click', 'button.ul-appending', function() {
var parent = $(this).closest('li');
var childUl = parent.children('ul');
if(childUl.length === 0) {
parent.append("<ul class='newul'></ul>");
childUl = parent.children('ul');
}
childUl.append($("<li><input type='text'><span></span><button class='ul-appending'>add</button></li>"));
});*{padding: 0; border: 0; outline: 0; list-style-type: none; font-weight: inherit; font-style: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.organograma input[type='text'] {
width: 200px;
height: 35px;
border: 1px solid #bbb;
border-radius: 3px;
margin-bottom: 10px;
padding: 5px 10px;
font-size: 13px;
color: #555;
display: inline-block;
}
.organograma button {
display: inline-block;
height: 20px;
background: transparent;
color: #888;
width: 20px;
border-radius: 3px;
cursor: pointer;
outline: 0!important;
font-size: 13px;
margin-left: 5px;
line-height: 17px;
}
.organograma ul {
padding-left: 15px;
position: relative;
}
.organograma ul:before {
content: "";
width: 1px;
height: calc(100% - 17px);
background: #bbb;
position: absolute;
left: 7px;
top: -10px;
}
.organograma ul:after {
content: "";
width: 15px;
height: 1px;
background: #bbb;
position: absolute;
left: -8px;
bottom: 27px;
}
.organograma > ul:after, .organograma > ul > li > ul:after {
content: none;
}
.organograma > ul:before {
content: none;
}
.organograma ul li {
position: relative;
}
.organograma ul li:before {
content: "";
width: 9px;
height: 1px;
background: #bbb;
position: absolute;
left: -8px;
top: 17px;
}
.organograma > ul > li:before {
content: none;
}
.organograma ul li:last-child {
margin-bottom: 0;
}
.organograma > ul {
padding-left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="organograma">
<ul>
<li id="pai">
<input type="text" value="Prefeito"><span></span><button class="ul-appending">add</button>
<ul>
<li>
<input type="text"><span></span><button class="ul-appending">add</button>
</li>
</ul>
</li>
</ul>
</div>