When I click on the ADD button, the text appears below but in the same column. There are 2 input fields.
I have used:
<input id="accordion_input" type="text"/>Another one is:
<div id="accordion_body" class="panel-body"></div>
https://i.sstatic.net/t1qFV.png
So, when I fill up the input and div area and click the ADD button, I should appear. If I click the add button a second time, it should clone the first input data. Each cloned part of the data should show in a different column, not the same column. Like the image below:
https://i.sstatic.net/nUd2V.png
$(document).ready(function() {
$('#Add_btn').click(function() {
$('#accordion_body').append($('#editableDiv').html());
var x = $("#accordion_input").val();
$("#accordion_title").append(x);
});
});<html>
<head>
<title>404</title>
</head>
<body>
<input id="accordion_input" type="text">
<div id="editableDiv" contenteditable=""></div><br/>
<div id="acc_main" contenteditable="false" class="accordion-main">
<div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne" contenteditable="false">
<h4 class="panel-title">
<a id="accordion_title" style="display: block"></a>
</h4>
<div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="display: block">
<div id="accordion_body" class="panel-body"></div>
</div>
</br>
</div>
</div>
</div>
</div>
<button id="Add_btn">Add</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>