更改ID的复选框和标签

Question

I have a function that is replacing placeholders in a string of HTML with content from JS objects:

function inputCards() {
    $('#maincontent').empty();
    storyQuests.name.forEach(function(val, i) {
        var formattedCard = mainCardHTML.replace('%questName%', storyQuests.name[i])
                                        .replace('%questChapter%', storyQuests.chapter[i])
                                        .replace('%questImg%', storyQuests.img[i])
                                        .replace('%questDescription%', storyQuests.description[i])
                                        .replace('replaceBox', storyQuests.check[i]);
        $('#maincontent:last').append(formattedCard);
    })
}

This is how the code is now, the problem I ran into is that I am using materialize and the checkbox code on a card is:

<div class="card-action">
  <form action="#">
    <p>
      <input type="checkbox" id="replaceBox" />
      <label for="replaceBox" class="white-text">Complete!</label>
    </p>
  </form>
</div>

Everything on the page is going OK, except when it loads all the cards ALL of the checkboxes when clicked only effect the checkbox in the first card! So I assumed this was because they all had the same ID of "replaceBox". So I added this to solve it:

.replace('replaceBox', storyQuests.check[i]);

(Actually I started with something else that didn't work at all, tried several other ways and eventually gave up and created an additional item in my object to hold the checkbox IDs that that is referencing:

check: ['box0', 'box1', 'box2', 'box3', 'box4', 'box5', 'box6', 'box7', 'box8', 'box9', 'box10', 'box11', 'box12', 'box13', 'box14', 'box15', 'box16', 'box17', 'box18', 'box19', 'box20', 'box21', 'box22', 'box23', 'box24', 'box25', 'box26', 'box27', 'box28', 'box29', 'box30', 'box31', 'box32', 'box33', 'box34', 'box35', 'box36', 'box37', 'box38', 'box39', 'box40', 'box41', 'box42']

However, even though the .replace works on everything else, on these IDs it doesn't seem to, it stops ALL checkboxes from working and the console shows this error:

GET file:///A:/sites/mysite-com/undefined
net::ERR_FILE_NOT_FOUND

So ultimately, how do I replace the words "replaceBox" with different values, or honestly any other solution to allow each checkbox to be checked independently. I thought about removing any ID at all on the checkboxes but I feel I'll need them in the future as I plan on making a way for people to login and have it save the checked state of each card.

EDIT 1: The mainCardHTML code:

var mainCardHTML = "<div class='col hide-on-small-only m3'>&nbsp;</div>" +
                   "<div class='col s6'>" +
                     "<h5 class='header xvred-text'id='replaceMe'>%questName%</h5>" +
                     "<h6 class='header xvblue-text'id='replaceMe'>%questChapter%</h6>" +
                     "<div class='card horizontal hoverable'>" +
                       "<div class=card-image><img id='replaceMe' src=%questImg%></div>" +
                       "<div class='card-stacked xvred'>" +
                         "<div class='card-content xvblue'>" +
                           "<p id='replaceMe'>%questDescription%" +
                         "</div>" +
                         "<div class=card-action>" +
                           "<form action=#>" +
                             "<p><input id='replaceBox' type=checkbox>" +
                             "<label class=white-text for='replaceBox'>Complete!</label>" +
                           "</form>" +
                         "</div>" +
                       "</div>" +
                     "</div>" +
                   "</div>" +
                   "<div class='col hide-on-small-only m3'>&nbsp;</div>"

The storyQuests object(The actual object is way to long to post here for readability so I replaced the strings):

var storyQuests = {
    name: ["43 strings", "43 strings", "..."],
    chapter: [43 numbers, 43 numbers, ...],
    img: ["43 strings", "43 strings", "..."],
    description: ["43 strings", "43 strings", "..."]
    check: ["box0", "box1", "..."]
}

Answer 1

First a little note, review the HTML code of mainCardHTML , there are two <p> elements unclosed (no </p> ) and some of the html attributes don't have the ' in their values.

In your storyQuests object, you don't have the comma before the check field. It's probably a typo pasting the code in the question, but verify it.

Javascript function replace by default only replace the first appearance of the word. In your case, you have two replaceBox on each card, so you should use...

.replace(/replaceBox/g, storyQuests.check[i]

With all this, your replacement code works without problem in fiddle...

https://fiddle.jshell.net/rigobauer/v8erbuur/