so i enable dev mode create a box and a container #button1 and #box1
then i add this code
$w.onReady(function () {
let inputCounter = 1; // Track input sets
$w("#button1").onClick(() => {
let newInputId = `input${inputCounter}`;
let newRemoveId = `remove${inputCounter}`;
console.log("Button clicked!"); // Debugging
// Create a new input field
let newInput = `<div id="set${inputCounter}" class="input-set" style="margin-bottom:10px;">
<input type="text" id="${newInputId}" placeholder="Enter value" class="wix-style-input" style="padding:5px;"/>
<button id="${newRemoveId}" class="remove-btn" data-id="${inputCounter}" style="margin-left:5px; padding:5px;">Remove</button>
</div>`;
$w("#box1").html += newInput; // Append new input set
inputCounter++;
// Add event listener for remove buttons
setTimeout(() => {
$w("#box1").onClick((event) => {
if (event.target.classList.contains("remove-btn")) {
let id = event.target.getAttribute("data-id");
$w(`#set${id}`).remove();
}
});
}, 100);
});
});
i get button clicked but no inputs added to the container box and no real message on dev tools
what’s the way to append the html either with new inputs or text to add content to the box1 when someone clicks on button1
here is a basic idea of what i want to do
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="addContentButton" >Add Content</button>
<div id="contentContainer"style="border: 1px solid red;">
</div>
<script>
$(document).ready(function() {
$('#addContentButton').click(function() {
// HTML content to append
var newContent = "<div class='new-content'>New Content Added: " + new Date().toLocaleString() + "</div>";
// Append content to the container
$('#contentContainer').append(newContent);
});
});
</script>
</body>
</html>
