JS Versuch, neue Eingabefeld und Schaltfläche hinzufügen

Question

Ich versuche, die folgenden Dinge zu tun:

• eine Schaltfläche links von der Schließen-Schaltfläche hinzufügen, nachdem Sie ein Element hinzufügen
• den Aufzählungspunkt auf der linken Seite entfernen jedes neue Element nach wird das Element
• Platz ein zweites Eingabefeld unter dem Element hinzufügen Box

ich positiv bin fügte hinzu, dass die meisten davon aus der JavaScript-Datei kommt. Leider weiß ich nicht genug JS, um dies zu tun. Bitte helfen Sie, wenn Sie können.

/* Include the padding and border in an element's total width and height */ 
* { 
    box-sizing: border-box; 
} 

body{ 
    background: #fff1d9; 
} 

/* Create three equal columns that floats next to each other */ 
.column { 
    float: left; 
    width: 25%; 
    padding: 10px; 
    height: 300px; /* Should be removed. Only for demonstration */ 
} 

/* Clear floats after the columns */ 
.row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
.logo{ 
    right: 90%; 
} 
/* Remove margins and padding from the list */ 
ul { 
    margin: 0; 
    padding: 0; 
} 

/* Style the list items */ 
ul li { 
    cursor: pointer; 
    position: relative; 
    padding: 12px 8px 12px 40px; 
    background: #eee; 
    font-size: 18px; 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
    transition: 0.2s; 

    /* make the list items unselectable */ 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

/* Set all odd list items to a different color (zebra-stripes) */ 
ul li:nth-child(odd) { 
    background: rgba(235, 110, 128, 0.6); 
} 

/* Darker background-color on hover */ 
ul li:hover { 
    background: #eb6e80; 
} 

/* When clicked on, add a background color and strike out text */ 
ul li.checked { 
    background: #888; 
    color: #fff; 
    text-decoration: line-through; 
} 

/* Add a "checked" mark when clicked on */ 
ul li.checked::before { 
    content: ''; 
    position: absolute; 
    border-color: #fff; 
    border-style: solid; 
    border-width: 0 2px 2px 0; 
    top: 10px; 
    left: 16px; 
    transform: rotate(45deg); 
    height: 15px; 
    width: 7px; 
} 

/* Style the close button */ 
.close { 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 12px 16px 12px 16px; 
} 

.close:hover { 
    background-color: #eb6e80; 
    color: black; 
} 

/* Style the header */ 
.header1 { 
    background-color: rgba(0, 143, 149, 0.76); 
    padding: 30px 40px; 
    color: white; 
    text-align: center; 
} 

.header2 { 
    background-color: rgba(233, 176, 0, 0.85); 
    padding: 30px 40px; 
    color: white; 
    text-align: center; 
} 

.header3 { 
    background-color: rgba(226, 78, 66, 0.76); 
    padding: 30px 40px; 
    color: white; 
    text-align: center; 
} 


/* Clear floats after the header */ 
.header1:after, .header2:after, .header3:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

/* Style the input */ 
input { 
    border: none; 
    width: 75%; 
    padding: 10px; 
    float: left; 
    font-size: 16px; 
} 

/* Style the "Add" button */ 
.addBtn { 
    padding: 10px; 
    width: 75%; 
    background: rgb(254, 166, 128); 
    color: #fff1d9; 
    float: left; 
    text-align: center; 
    font-size: 16px; 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
    cursor: pointer; 
    transition: 0.3s; 
} 

.addBtn:hover { 
    background-color: rgb(228, 148, 122); 
} 

/********* USER PROFILE ********/ 

#myInput { 
    border-box: box-sizing; 

    background-position: 14px 12px; 
    background-repeat: no-repeat; 
    font-size: 16px; 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
    padding: 14px 20px 12px 45px; 
    border: none; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: rgba(254, 166, 128, 0.68); 
    min-width: 230px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown a:hover {background-color: rgba(235, 110, 128, 0.65) 
} 

.show {display:block;} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Grocery List</title> 
    <script src="https://use.fontawesome.com/780b259326.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script type='text/javascript' src='script.js'></script> 
</head> 
<body>  

    <div><center style="font-size: 90px; color:#fea680; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;"><b>Shopping List</b></center></div> 

    <div class="row"> 
     <div class="column"> 
      <div id="myDIV1" class="header1"> 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Amir's List</h2> 
       <input type="text" id="myInput1" placeholder="Item..."> 
       <span onclick="newElement1()" class="addBtn">Add</span> 
      </div> 
      <ul id="myUL1"> 
       <li> 
        hello 
        <span class="close"></span> 
       </li> 
      </ul> 
     </div> 
     <div class="column"> 
      <div id="myDIV2" class="header2"> 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Sush's List</h2> 
       <input type="text" id="myInput2" placeholder="Item..."> 
       <span onclick="newElement2()" class="addBtn">Add</span> 
      </div> 

      <ul id="myUL2"></ul> 
     </div> 
     <div class="column"> 
      <div id="myDIV3" class="header1"> 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Daniel's List</h2> 
       <input type="text" id="myInput3" placeholder="Item..."> 
       <span onclick="newElement3()" class="addBtn">Add</span> 
      </div> 

      <ul id="myUL3"></ul> 
     </div> 
     <div class="column"> 
      <div id="myDIV4" class="header3"> 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">House List</h2> 
       <input type="text" id="myInput4" placeholder="Item..."> 
       <span onclick="newElement4()" class="addBtn">Add</span> 
      </div> 

      <ul id="myUL4"></ul> 
     </div> 
    </div> 
</body> 
</html> 

// Create a "close" button and append it to each list item 
 
var myNodelist = document.getElementsByTagName("LI"); 
 
var i; 
 
for (i = 0; i < myNodelist.length; i++) { 
 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    myNodelist[i].appendChild(span); 
 
} 
 

 
// Click on a close button to hide the current list item 
 
var close = document.getElementsByClassName("close"); 
 
var i; 
 
for (i = 0; i < close.length; i++) { 
 
    close[i].onclick = function() { 
 
     var div = this.parentElement; 
 
     div.style.display = "none"; 
 
    } 
 
} 
 

 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement1() { 
 
    var li = document.createElement("li"); 
 
    var inputValue = document.getElementById("myInput1").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL1").appendChild(li); 
 
    } 
 
    document.getElementById("myInput1").value = ""; 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement2() { 
 
    var li = document.createElement("li"); 
 
    var inputValue = document.getElementById("myInput2").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL2").appendChild(li); 
 
    } 
 
    document.getElementById("myInput2").value = ""; 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement3() { 
 
    var li = document.createElement("li"); 
 
    var inputValue = document.getElementById("myInput3").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL3").appendChild(li); 
 
    } 
 
    document.getElementById("myInput3").value = ""; 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement4() { 
 
    var li = document.createElement("li"); 
 
    var inputValue = document.getElementById("myInput4").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL4").appendChild(li); 
 
    } 
 
    document.getElementById("myInput4").value = ""; 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
}

Answer 1

Hier gehen Sie. Es gibt mehrere Änderungen in HTML, Javascript und CSS. Gehe zum besseren Verständnis durch den Code. Ich überlasse Ihnen das Styling, um es zu tun.

 
// Create a "close" button and append it to each list item 
 
var myNodelist = document.getElementsByTagName("LI"); 
 
var i; 
 
for (i = 0; i < myNodelist.length; i++) { 
 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    myNodelist[i].appendChild(span); 
 
} 
 

 
// Click on a close button to hide the current list item 
 
var close = document.getElementsByClassName("close"); 
 
var i; 
 
for (i = 0; i < close.length; i++) { 
 
    close[i].onclick = function() { 
 
     var div = this.parentElement; 
 
     div.style.display = "none"; 
 
    } 
 
} 
 

 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement1() { 
 
    var li = document.createElement("div"); 
 
    var inputValue = document.getElementById("myInput1").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL1").appendChild(li); 
 
    } 
 
    document.getElementById("myInput1").value = ""; 
 

 
// here is the button logic 
 
    var btn = document.createElement("button"); 
 
    var txt = document.createTextNode("button"); 
 
    btn.appendChild(txt); 
 
    li.appendChild(btn); 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement2() { 
 
    var li = document.createElement("div"); 
 
    var inputValue = document.getElementById("myInput2").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL2").appendChild(li); 
 
    } 
 
    document.getElementById("myInput2").value = ""; 
 

 
// here is the button logic 
 
    var btn = document.createElement("button"); 
 
    var txt = document.createTextNode("button"); 
 
    btn.appendChild(txt); 
 
    li.appendChild(btn); 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement3() { 
 
    var li = document.createElement("div"); 
 
    var inputValue = document.getElementById("myInput3").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL3").appendChild(li); 
 
    } 
 
    document.getElementById("myInput3").value = ""; 
 

 
// here is the button logic 
 
    var btn = document.createElement("button"); 
 
    var txt = document.createTextNode("button"); 
 
    btn.appendChild(txt); 
 
    li.appendChild(btn); 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
// Create a new list item when clicking on the "Add" button 
 
function newElement4() { 
 
    var li = document.createElement("div"); 
 
    var inputValue = document.getElementById("myInput4").value; 
 
    var t = document.createTextNode(inputValue); 
 
    li.appendChild(t); 
 
    if (inputValue === '') { 
 
     alert("You must write something!"); 
 
    } else { 
 
     document.getElementById("myUL4").appendChild(li); 
 
    } 
 
    document.getElementById("myInput4").value = ""; 
 

 
// here is the button logic 
 
    var btn = document.createElement("button"); 
 
    var txt = document.createTextNode("button"); 
 
    btn.appendChild(txt); 
 
    li.appendChild(btn); 
 

 
    var span = document.createElement("SPAN"); 
 
    var txt = document.createTextNode("\u00D7"); 
 
    span.className = "close"; 
 
    span.appendChild(txt); 
 
    li.appendChild(span); 
 

 
    for (i = 0; i < close.length; i++) { 
 
     close[i].onclick = function() { 
 
      var div = this.parentElement; 
 
      div.style.display = "none"; 
 
     } 
 
    } 
 
}

<style> 
 
/* Include the padding and border in an element's total width and height */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body{ 
 
    background: #fff1d9; 
 
} 
 

 
/* Create three equal columns that floats next to each other */ 
 
.column { 
 
    float: left; 
 
    width: 25%; 
 
    padding: 10px; 
 
    height: 300px; /* Should be removed. Only for demonstration */ 
 
} 
 

 
/* Clear floats after the columns */ 
 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.logo{ 
 
    right: 90%; 
 
} 
 
/* Remove margins and padding from the list */ 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* Style the list items */ 
 
ul li { 
 
    cursor: pointer; 
 
    position: relative; 
 
    padding: 12px 8px 12px 40px; 
 
    background: #eee; 
 
    font-size: 18px; 
 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
 
    transition: 0.2s; 
 

 
    /* make the list items unselectable */ 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
ul > div { 
 
    cursor: pointer; 
 
    position: relative; 
 
    padding: 12px 8px 12px 40px; 
 
    background: #eee; 
 
    font-size: 18px; 
 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
 
    transition: 0.2s; 
 

 
    /* make the list items unselectable */ 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* Set all odd list items to a different color (zebra-stripes) */ 
 
ul div:nth-child(odd) { 
 
    background: rgba(235, 110, 128, 0.6); 
 
} 
 

 
/* Darker background-color on hover */ 
 
ul div:hover { 
 
    background: #eb6e80; 
 
} 
 

 
/* When clicked on, add a background color and strike out text */ 
 
ul div.checked { 
 
    background: #888; 
 
    color: #fff; 
 
    text-decoration: line-through; 
 
} 
 

 
/* Add a "checked" mark when clicked on */ 
 
ul div.checked::before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-color: #fff; 
 
    border-style: solid; 
 
    border-width: 0 2px 2px 0; 
 
    top: 10px; 
 
    left: 16px; 
 
    transform: rotate(45deg); 
 
    height: 15px; 
 
    width: 7px; 
 
} 
 

 
/* Style the close button */ 
 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    padding: 12px 16px 12px 16px; 
 
} 
 

 
.close:hover { 
 
    background-color: #eb6e80; 
 
    color: black; 
 
} 
 

 
/* Style the header */ 
 
.header1 { 
 
    background-color: rgba(0, 143, 149, 0.76); 
 
    padding: 30px 40px; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.header2 { 
 
    background-color: rgba(233, 176, 0, 0.85); 
 
    padding: 30px 40px; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.header3 { 
 
    background-color: rgba(226, 78, 66, 0.76); 
 
    padding: 30px 40px; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 

 
/* Clear floats after the header */ 
 
.header1:after, .header2:after, .header3:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
/* Style the input */ 
 
input { 
 
    border: none; 
 
    width: 75%; 
 
    padding: 10px; 
 
    float: left; 
 
    font-size: 16px; 
 
} 
 

 
/* Style the "Add" button */ 
 
.addBtn { 
 
    padding: 10px; 
 
    width: 75%; 
 
    background: rgb(254, 166, 128); 
 
    color: #fff1d9; 
 
    float: left; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
.addBtn:hover { 
 
    background-color: rgb(228, 148, 122); 
 
} 
 

 
/********* USER PROFILE ********/ 
 

 
#myInput { 
 
    border-box: box-sizing; 
 

 
    background-position: 14px 12px; 
 
    background-repeat: no-repeat; 
 
    font-size: 16px; 
 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
 
    padding: 14px 20px 12px 45px; 
 
    border: none; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: rgba(254, 166, 128, 0.68); 
 
    min-width: 230px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover {background-color: rgba(235, 110, 128, 0.65) 
 
} 
 

 
.show {display:block;} 
 
</style>

<html> 
 
<head> 
 
    <title>Grocery List</title> 
 
    <script src="https://use.fontawesome.com/780b259326.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
 
    <script type='text/javascript' src='script.js'></script> 
 
</head> 
 
<body>  
 

 
    <div><center style="font-size: 90px; color:#fea680; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;"><b>Shopping List</b></center></div> 
 

 
    <div class="row"> 
 
     <div class="column"> 
 
      <div id="myDIV1" class="header1"> 
 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Amir's List</h2> 
 
       <input type="text" id="myInput1" placeholder="Item..."> 
 
       <input type="text" placeholder="2nd text box"> 
 
       <span onclick="newElement1()" class="addBtn">Add</span> 
 
      </div> 
 
      <ul id="myUL1"> 
 
      </ul> 
 
     </div> 
 
     <div class="column"> 
 
      <div id="myDIV2" class="header2"> 
 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Sush's List</h2> 
 
       <input type="text" id="myInput2" placeholder="Item..."> 
 
       <input type="text" placeholder="2nd text box"> 
 
       <span onclick="newElement2()" class="addBtn">Add</span> 
 
      </div> 
 

 
      <ul id="myUL2"></ul> 
 
     </div> 
 
     <div class="column"> 
 
      <div id="myDIV3" class="header1"> 
 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Daniel's List</h2> 
 
       <input type="text" id="myInput3" placeholder="Item..."> 
 
       <input type="text" placeholder="2nd text box"> 
 
       <span onclick="newElement3()" class="addBtn">Add</span> 
 
      </div> 
 

 
      <ul id="myUL3"></ul> 
 
     </div> 
 
     <div class="column"> 
 
      <div id="myDIV4" class="header3"> 
 
       <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">House List</h2> 
 
       <input type="text" id="myInput4" placeholder="Item..."> 
 
       <input type="text" placeholder="2nd text box"> 
 
       <span onclick="newElement4()" class="addBtn">Add</span> 
 
      </div> 
 

 
      <ul id="myUL4"></ul> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>