У меня есть этот код Jquery / javascript, который клонирует элемент шаблона и назначает клону итеративный идентификатор (поэтому первый клон называется 'eventCard0', второй 'eventCard1' et c.)
Это прекрасно работает, кроме .prop('name', 'eventCard' + number), который по какой-то причине не меняет атрибут имени клона таким же образом, как он меняет идентификатор клона. Я не могу понять, почему это вообще
var newEventBtn = document.getElementById("newEventButton");
newEventBtn.onclick = function() {
let number = $('#events .eventInputs').length;
let cloneParent = "#eventCardTemplate";
let newClone = $(cloneParent).clone().prop('id', "eventCard" + number).prop('name', "eventCard" + number);
newClone.appendTo("#events");
}
Это тег шаблона <li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
И это всего HTML:
<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit();
}
?>
<html>
<head>
<title>Timeline Creator</title>
<link rel="stylesheet" type="text/css" href="timelineCreator.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
<input type="text" name="eventName" class="eventName" maxlength="50" placeholder="Event Name" required>
<textarea name="eventDesc" class="eventDesc" placeholder="Event Description" required></textarea>
<p class="label">Start Date</p>
<input type="date" name="startDate" class="date" required>
<!-- <label for="startIsEnd">Start date = End Date</label>
<input type="checkbox" name="startIsEnd" class="startIsEnd"> -->
<p class="label">End Date</p>
<input type="date" name="endDate" class="date" required>
<p class="label">Political</p>
<input type="checkbox" name="political" value="political" class="checkboxes">
<p class="label">Economic</p>
<input type="checkbox" name="economic" value="economic" class="checkboxes">
<p class="label">Social</p>
<input type="checkbox" name="social" value="social" class="checkboxes">
</li>
<a href="home.php"><-- Back</a>
<form action="createTimeline.php" method="post" id="timelineCreator">
<input type="text" name="timelineName" id="timelineName" maxlength="50" placeholder="Timeline Name" autofocus required>
<textarea id="timelineDesc" name="timelineDesc" placeholder="Timeline Description" required></textarea>
<ul id="events">
</ul>
<button type="button" id="newEventButton">+ Add Event</button>
<input type="submit" id="createTimeline" value="Create Timeline">
</form>
<script src="timelineCreator.js"></script>
</body>
</html>