Hi,
A couple of problems I see is your script inserting spans with #IDs’ on them. That means you will have more than one element with the same ID, though it is not necessarily the problem your explaining, it is invalid html nonetheless.
but when I click the button two or more times the textareas begin appearing in wonky places (some on top of one another, some not adjusting for the ones above, etc.)
$("#plus").click(function() {
$("#plus").before("<br><input type='text' name='Loc' style='position:absolute;left:0;'>");
var newSpan = "<br><span id='DateSpan" + spanCounter + "' style='position:absolute;left:0;'><input type='text' name='Date'> in </span>";
You are setting those spans as position:absolute with nothing but a <br> tag to separate them. I see that as a bigger problem that may very well be the source of the misplaced spans.
The first thing I would do is remove all your inline styles and absolute positioning. Then set up a solid html structure, then in the CSS set the styles for the new spans your script inserts, and make them classes.
I see you are using the <img> as your click function so you can leave it as AP as the last child in that div.
The following code produces this for me…
It may be better served as a form with a label for the headings, but the following uses divs to get the basic structure in place. You’ll need to rework your script a little, something broke on me when changing to classes.
HTH
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Test Page</title>
<style>
body {
background-color: rgb(90, 90, 96);
font-family: "Lucida Sans Unicode";
}
.addP {
float: left;
min-width: 50%;
font-weight:bold;
font-size:40px;
outline:1px solid red;
}
.wrap {
position:relative; /*for AP img*/
padding-right:50px; /*for AP img*/
margin:10px;
outline:1px solid red;
}
.heading,.heading.date,
.textArea1,.DateSpan0 {
display:inline-block;
vertical-align:top;
}
.heading,.heading.date {
min-width:5em;
margin-right:.25em;
background:#fff;
}
div input[type=text],
div span {
display:inline-block;
vertical-align:middle;
}
.DateSpan input {margin-right:10px;}
input[type=text] {
border-radius: 30px;
background-color: rgb(128, 128, 137);
border-style: none;
padding: 15px;
outline: none;
margin-bottom: 10px;
}
img#plus {
position:absolute;
top:10px; right:10px;
width:30px;
height:30px;
background:red;
font-size:16px;
}
</style>
</head>
<body>
<div class="addP">
<div class="wrap">
<div class="heading">Location:</div>
<div class="textArea1">
<input type="text" name="Loc1">
<br>
<input type="text" name="Loc">
<br>
<input type="text" name="Loc">
<img id="plus" src="plus.png" height="30" width="30" alt="img">
</div>
</div>
<div class="wrap">
<div class="heading date">Date:</div>
<div class="DateSpan0">
<span class="DateSpan"><input type="text" name="Date">in</span>
<br>
<span class="DateSpan"><input type="text" name="Date">in</span>
<br>
<span class="DateSpan"><input type="text" name="Date">in</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var appendHere = document.querySelector("DateSpan0");
var spanCounter = 1;
$("#plus").click(function() {
$("#plus").before("<br><input type='text' name='Loc'>");
var newSpan = "<br><span class='DateSpan" + spanCounter + "'><input type='text' name='Date'>in</span>";
appendHere.insertAdjacentHTML('beforeend', newSpan);
var newestSpan = "DateSpan" + spanCounter;
appendHere = document.querySelector(newestSpan);
spanCounter++;
});
});
</script>
</body>
</html>
Looking back at my code, maybe I didn’t implement it into the “Location” section, though, and I only did to the Date