Jquery Cloned Html Divs Don't Function-CodePudding

VIDEO I made it so when ever you a click a button the user is able to duplicate the note div but the copied not div do not function as the original it's not draggable and also when ever I change the color of the copied note it changes the original note color is there a way I could fix this and make it the duplicated notes work exactly like the original note?

Online Editor For The Project

I use jquery to make my div with the id note draggable and and also clone

        $('#note').draggable({
            handle: "#headeR"
        });

        //this will duplicate the note container
        function dup(){
    $(function(){
        $('#note').clone().appendTo('#notecopy');
    });

the div that I'm duplicating

<!-- my note area container-->
        <div  id="note">
            <!--text container-->

            <!--text header with colors-->
            <div id="headeR">
                <button id="color#1"  onclick="greennote()"></button>
                <!--buttons to change color-->
                <button id="color#1"  onclick="bluecolor()"></button>
                <button id="color#1"  onclick="redcolor()"></button>
                <button id="color#1"  onclick="purplecolor()"></button>
                <button  onclick="deleteR()"><span ></span><span
                        >Delete</span></button>
            </div>
            <!--text header with colors-->

            <!--text area-->
            <div  id="NOTEE">
                <textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
            </div>
            <!--text area-->

        </div>

Full Code

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<style>.NoteSection {
    font-family: 'Combo', cursive;
    background-color: #E2F1FF; 
    height: 50px;
    width: 245px;
    color: black;
    font-size: 25px;
    outline: none;
    box-shadow: 4px 4px 15px 2px  #AFC4D7;
    opacity: 0.9;
    position: relative;
    left: 250px;

}
textarea {
    font-family: 'Combo', cursive;
    background-color: #E2F1FF; 
    height: 240px;
    width: 240px;
    position: relative;
    bottom: 83%;
    color: black;
    font-size: 25px;
    outline: none;
    box-shadow: 4px 4px 15px 2px  #AFC4D7;
    opacity: 0.9;
    resize: none;

}


.BtnColor1 {
    background-color: #C2EA92;
    width: 30px;
    border: none;
    border-radius: 2px;
    height: 30px;
    box-shadow: 1px 1px 15px #728F4E;
}

.BtnColor2 {
    background-color: #92EADD;
    width: 30px;
    border: none;
    border-radius: 2px;
    height: 30px;
    box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
    background-color: #EA92A5;
    width: 30px;
    border: none;
    border-radius: 2px;
    height: 30px;
    box-shadow: 1px 1px 15px #8F4E55;
}

</style>
<body>
    
        <div  id="'note'">




        <div >
            <button onclick="dup()"  type="button"> <span >N</span>ote
                <span >
                    add_box
                </span></button>
        </div>
   <!-- my note area container-->
        <div  id="note">
            <!--text container-->

            <!--text header with colors-->
            <div id="headeR">
                <button id="color#1"  onclick="greennote()"></button>
                <!--buttons to change color-->
                <button id="color#1"  onclick="bluecolor()"></button>
                <button id="color#1"  onclick="redcolor()"></button>
                <button id="color#1"  onclick="purplecolor()"></button>
                <button  onclick="deleteR()"><span ></span><span
                        >Delete</span></button>
            </div>
            <!--text header with colors-->

            <!--text area-->
            <div  id="NOTEE">
                <textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
            </div>
            <!--text area-->

        </div>
        <div   id="notecopy" style="width:0px; height:0px;">

        </div>
        
            <script>
        
        $('#note').draggable({
            handle: "#headeR"
        });

        
        
        //this will duplicate the note container
        function dup(){
    $(function(){
        $('#note').clone().appendTo('#notecopy');
    });
}
       // changes notes colors
function greennote(){
    document.getElementById("notepage").style.backgroundColor = "#C2EA92"; 
}
function bluecolor(){
    document.getElementById("notepage").style.backgroundColor = "#92EADD";
}

function redcolor(){
    document.getElementById("notepage").style.backgroundColor = "#EA92A5";
}

function purplecolor(){
    document.getElementById("notepage").style.backgroundColor = "#EA92E9";
}
            </script>
</body>
</html>

CodePudding user response：

You need to understand that ID tags have to be unique. You are reusing them each time you make your clone and that is partly why this isn't working for you.

I show below a few ways of working around this and optimizing your code. Notice I don't use ID's at all in the javascript. I left the references in HTML because I didn't want to clean all the excess .. just show the JS. Notice how i use element.closest(ref) to find a container so I know which buttons affect which notepad. I also show how you can use that same logic for a delete function

$('.NoteSection').draggable({
  handle: ".headeR"
});

// get the 'master' refrerence so we can use it to make copies easily

let masterCopy = $('.NoteSection').first()

//this will duplicate the note container
function dup() {
  masterCopy.clone().appendTo('#notecopy');
}
// changes notes colors
let colors = {
  green: '#C2EA92',
  blue: "#92EADD",
  red: "#EA92A5",
  purple: "#EA92E9"
}

function deleteR(el) {
  el.closest('.NoteSection').remove()
}

function changeColor(el, color) {  el.closest('.NoteSection').querySelector(".notepage").style.backgroundColor = colors[color];
}

.NoteSection {
  font-family: 'Combo', cursive;
  background-color: #E2F1FF;
  height: 50px;
  width: 245px;
  color: black;
  font-size: 25px;
  outline: none;
  box-shadow: 4px 4px 15px 2px #AFC4D7;
  opacity: 0.9;
  position: relative;
  left: 250px;
}

textarea {
  font-family: 'Combo', cursive;
  background-color: #E2F1FF;
  height: 240px;
  width: 240px;
  position: relative;
  bottom: 83%;
  color: black;
  font-size: 25px;
  outline: none;
  box-shadow: 4px 4px 15px 2px #AFC4D7;
  opacity: 0.9;
  resize: none;
}

.BtnColor1 {
  background-color: #C2EA92;
  width: 30px;
  border: none;
  border-radius: 2px;
  height: 30px;
  box-shadow: 1px 1px 15px #728F4E;
}

.BtnColor2 {
  background-color: #92EADD;
  width: 30px;
  border: none;
  border-radius: 2px;
  height: 30px;
  box-shadow: 1px 1px 15px #4E8F8C;
}

.BtnColor3 {
  background-color: #EA92A5;
  width: 30px;
  border: none;
  border-radius: 2px;
  height: 30px;
  box-shadow: 1px 1px 15px #8F4E55;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div >
  <div >
    <button onclick="dup()"  type="button"> <span >N</span>ote
                <span >
                    add_box
                </span></button>
  </div>
  <!-- my note area container-->
  <div >
    <!--text container-->

    <!--text header with colors-->
    <div >
      <button  onclick="changeColor(this,'green')"></button>
      <!--buttons to change color-->
      <button id="color#1"  onclick="changeColor(this,'blue')"></button>
      <button id="color#1"  onclick="changeColor(this,'red')"></button>
      <button id="color#1"  onclick="changeColor(this,'purple')"></button>
      <button  onclick="deleteR(this)"><span ></span><span
                        >Delete</span></button>
    </div>
    <!--text header with colors-->

    <!--text area-->
    <div  id="NOTEE">
      <textarea  name="notes" row="20" cols="20" maxlength="67"></textarea>
    </div>
    <!--text area-->

  </div>
  <div id="notecopy" style="width:0px; height:0px;">

  </div>