JSでHTMLを構築する際に、一意のIDを与える方法はありますか？

Question

だから私は、ストア機能を構築しようとしていると私は何をしたいのは、ページ上の「カートに追加」ボタンを押すことで、ストレージに、各オブジェクトの情報を保存することができていますよ。私は、forループを使って複数のアイテム/フィーチャーボックスを以下のように作成しながら、「カートに追加」ボタンごとに一意のIDを作成する方法を知りたいですか？

// temporary javascript thingy while we build the remove catalogs 
var popularItems = 
     [ 
      { 
       "itemImageSrc" : "./images/StoreProducts/StrawberryPi2ModelB.jpg", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi 3 Model B </p>", 
       "itemPrice" : "<p>$49.95</p>", 
       "itemPopular" : "true" 
      }, 
      { 
       "itemImageSrc" : "./images/StoreProducts/StrawberryPiZero.jpg", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi Zero </p>", 
       "itemPrice" : "<p>$29.95</p>", 
       "itemPopular" : "true" 
      }, 
      { 
       "itemImageSrc" : "./images/StoreProducts/StrawberryPiCase.jpg", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi Case </p>", 
       "itemPrice" : "<p>$10.95</p>", 
       "itemPopular" : "true" 
      }, 
      { 
       "itemImageSrc" : "./images/StoreProducts/placeholder.png", 
       "itemImageAlt" : "placeholder", 
       "itemDescription" : "<p> Strawberry Pi Extension Kit </p>", 
       "itemPrice" : "<p>$149.95</p>", 
       "itemPopular" : "false" 
      } 
     ]; 

document.write('<div class="feature-container">'); 

for (var i = 0; i < popularItems.length; i++) { 

if (popularItems[i].itemPopular == "true") { 

document.writeln('<div class="feature-box">'); 
document.write('<img src="'); 
document.writeln(popularItems[i].itemImageSrc); 
document.write('" alt="'); 
    document.write(popularItems[i].itemImageAlt); 
document.writeln('">'); 

document.write('<div class="feature-box-model" id="var i">'); 
document.write(popularItems[i].itemDescription); 
document.writeln('</div>'); 

document.write('<div class="feature-box-price">'); 
document.write(popularItems[i].itemPrice); 
document.writeln('</div>'); 

document.writeln('<FORM>'); 
    document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="unique">'); 
document.writeln('</FORM>'); 
document.writeln('</div>'); 

} 

}

Answer 1

：

次に単純なアプローチのようなものかもしれません

document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="item_'+i+'">');

Answer 2

私は明白

`for(let =0; i<n; i++){ 
    let key = 'key_'+i; 
    .... 
}' 

がニーズを満たしていないと仮定していますか？であることを

document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="unique">');

：あなたはこの行を変更することができ

`key = 'key_'+Math.random().toString().slice(2);` 
`// => "key_21542707442294184"`