When the add button is clicked, I am dynamically adding lists and a new button labeled as "New Button" to a web page. My goal is to have a variable printed inside the parent list when this "New Button" is clicked. How can I achieve this functionality?
Below is the CSS code for styling:
.boardcanvas
{
position: relative;
-webkit-box-flex: 1;
flex-grow: 1;
background-color: cadetblue;
}
#board
{
white-space: nowrap;
margin-bottom: 10px;
overflow-x:auto;
overflow-y:hidden;
padding-right: 56px;
background-color: rgb(95, 130, 131);
position: absolute;
display: inline-flex;
}
.listwrapper{
height: 100%;
width: 270px;
vertical-align: top;
white-space: nowrap;
background-color: rgb(10, 73, 75);
display: inline-block;
margin-left:0;
}
.controls{
padding:0;
margin:0;
}
Here's the HTML structure:
<body class = "boardcanvas">
<div id="board">
<div class = "controls">
<button onclick="addme()">
Add
</button>
</div>
<div class ="listwrapper" id = "listwrapper" style="display:none">
<ul id ="selected" style ="margin:0; padding:0; list-style: none;"
class ="consort">
<div id ="transparent">
<button onclick ="new1()">New button</button>
</div>
</ul>
</div>
</div>
<a id = "addlist" onclick ="change()" style ="color:inherit" href="#">
Add a List...
</a>
</body>
JQuery script to handle interactions:
<script type ="text/javascript">
$('.controls').hide();
function change()
{ $('#addlist').replaceWith('<div class = "controls"><button
onclick="addme()">Add'+
'</button></div>');
}
function addme()
{
$('#board').append('<div class ="listwrapper" id = "listwrapper">'+
'<ul id ="selected" style ="margin:0; padding:0; list-style:
none;" class ="consort">'+
'<div id ="transparent">'+
'<button onclick ="new1()">New button</button>'+
'</div>'+
'</ul></div>');
$('.controls').appendTo('#board');
}
function new1(){
$("#listwrapper").append("a");
}