Can I loop or rewrite the code for populating this list somehow?
<p>I don't even know where to start?!? A hint would be much appreciated!</p>

<p><b>JS:</b></p>

<pre><code>document.getElementById('first').getElementsByTagName('h3')(0).innerHTML = data.products[0].product;
document.getElementById('second').getElementsByTagName('h3')(0).innerHTML = data.products[1].product;
document.getElementById('third').getElementsByTagName('h3')(0).innerHTML = data.products[2].product;

document.getElementById('first').getElementsByTagName('p')(0).innerHTML = data.products[0].description;
document.getElementById('second').getElementsByTagName('p')(0).innerHTML = data.products[1].description;
document.getElementById('third').getElementsByTagName('p')(0).innerHTML = data.products[2].description;

document.getElementById('first').getElementsByTagName('h3')(0).setAttribute('class', data.products[0].code);
document.getElementById('second').getElementsByTagName('h3')(0).setAttribute('class', data.products[1].code);
document.getElementById('third').getElementsByTagName('h3')(0).setAttribute('class', data.products[2].code);

document.getElementById('first').setAttribute('code', data.products[0].code);
document.getElementById('second').setAttribute('code', data.products[1].code);
document.getElementById('third').setAttribute('code', data.products[2].code);
</code></pre>

<p><b>HTML:</b></p>

<pre><code>&lt;div class="items"&gt;
&lt;ul&gt;
&lt;li id="first"&gt;&lt;h3&gt;&lt;/h3&gt;&lt;span&gt;&lt;p&gt;&lt;/p&gt;&lt;br&gt;&lt;button&gt;Find&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li id="second"&gt;&lt;h3&gt;&lt;/h3&gt;&lt;span&gt;&lt;p&gt;&lt;/p&gt;&lt;br&gt;&lt;button&gt;Find&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li id="third"&gt;&lt;h3&gt;&lt;/h3&gt;&lt;span&gt;&lt;p&gt;&lt;/p&gt;&lt;br&gt;&lt;button&gt;Find&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>
