JQuery - changing name of input for every loadTemplate()

Question

Here is a template I want to render every time a button is clicked:

<script id="hidden-template" type="text/html">
<div id="order-container">
    <div class="form-group ">
        <input class="form-control name" placeholder="Name" type="text">
    </div>
    <div class="form-group ">
        <ul class="food" style="list-style-type: none; display:inline-block;">
            <li><label><input value="burger" type="radio" class="burger" data-name="food">Burger</label></li>
            <li><label><input value="chicken" type="radio" class="chicken" name="food">Chicken</label></li>
            <li><label><input value="falafel" type="radio" class="falafel" name="food">Falafel</label></li>
            <li><label><input value="fries" type="radio" class="fries" name="food">Fries</label></li>
        </ul>
        <ul class="veggies" style="list-style-type: none; display:inline-block;">
            <li><label><input type="checkbox" class="lettuce" name="veggie">Lettuce</label></li>
            <li><label><input type="checkbox" class="tomato" name="veggie">Tomato</label></li>
            <li><label><input type="checkbox" class="cucumber" name="veggie">Cucumber</label></li>
            <li><label><input type="checkbox" class="onion" name="veggie">Onion</label></li>
        </ul>
        <ul class="sauces" style="list-style-type: none; display:inline-block;">
            <li><label><input type="radio" class="XSpice" name="sauce">Extra Spicy</label></li>
            <li><label><input type="radio" class="spice" name="sauce">Spicy</label></li>
            <li><label><input type="radio" class="mild" name="sauce">Mild</label></li>
            <li><label><input type="radio" class="noSpice" name="sauce">No Spice</label></li>
        </ul>
    </div>
</div>

And on the first list item of the first list, I am trying to add a custom name for each template so that when you load a new template, it does not affect all the other input in that template because it has a different name.

Here is where I am rendering it:

$("#app").loadTemplate($("#hidden-template"), {
    food: "TESTING"
})

but when I console.log the name of the input, it returns undefined. Is there no such thing as data-name? I cant seem to find some good documentation because I think its because it is a plugin of JQuery. How can I change the name of the inputs every time I load the template? Or is there a better way I can do this?

Answer 1

What about trying this?

$("li").first().attr('data-name') = "TESTING";