While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a problem arises...
//Adjusting z-index in css for multiple notes
var zIndex = 10000;
function updateIndex(element){
zIndex = zIndex+1; //Counter, '++' = +1
$(element).css('z-index', zIndex);
}
$("div .makeNew").on("click", function(e) {
updateIndex(this);
});
$(".note input textarea").on("click", function(e) {
updateIndex(this);
});
function MakeNewNote(){
zIndex = zIndex + 1;
$('#content').css('z-index', zIndex).append("<div class="note" ><div id="controlsTop"><div class="deleteNote">X</div><div class="makeNew">+</div></div><input value="My Note" /><textarea value="I Have something to save" cols="20" name="S1" rows="1"></textarea><div id="controlsExtra hidden"><div class="controlBold"></div><div class="controlItalic"></div><div class="controlUnderlined"></div><div class="controlLeft"></div><div class="controlCenter"></div><div class="controlRight"></div><div class="controlBigFont"></div><div class="controlSmallFont"></div></div> <!-- controlsExtra --></div> <!-- note -->");
$('.note').draggable();
}
function DeleteThisNote(){
$('.note').remove();
}
$(document).ready(MakeNewNote); // Creates a note just at startup
$(document).ready(function(){
$('div .makeNew').on('click', MakeNewNote); // Creates a new note, enables button press inside the note
$('div .deleteNote').one('click', DeleteThisNote); // Removes current note
});/* CSS DOCUMENT */
/* Author: John Doe */
/* Description: Main style for Sticky Notes */
/* Licensed to Example Company All rights reserverd 2022 */
.note {
width: 200px; height: 200px;
background:#FFFFCC;
margin:15px;
}
.note .controlsTop {
background:#FFFF66;
padding-top:50px;
margin-left:10px;
}
.note .controlsTop .deleteNote {
width:10px;
display:block;
float:left;
margin-left:5px;
}
.note .controlsTop .makeNew {
width:10px;
display:block;
float:left;
margin-left:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
// Should output here
</div>