Página dinâmica com JSON

Galera eu tenho seguinte código:

function construcao(){
 var section = document.getElementById('section');
 var qtn = loj.paoDeMel[0].pao.length;
 for (var i = 0; i < qtn; i++){
 section.innerHTML +='<div id="produto"><header><h1 id="titulo-prod">'+loj.paoDeMel[0].pao[i].nome+'.&nbsp;&nbsp;&nbsp;</h1></header><img id="img" src="../img/'+loj.paoDeMel[0].pao[i].foto+'"><h2 id="preco">Preço: '+loj.paoDeMel[0].pao[i].precokg+'</h2><select class="qtnProd" id="qtnProd"></select><button onclick="addCart()" class="bt-menu"><span class="glyphicon glyphicon-shopping-cart ico-bt"></span> Adicionar ao carrinho</button></div>';

 for(var c = 0; c < 3; c++){
 var op = document.getElementById('qtnProd');

 op.innerHTML +='<option value="0">'+loj.paoDeMel[0].pao[i].optNome[c].opt+'</option>';

 }

 }

}

	Basicamente estou incluindo a minha section com id section uma <div> e tudo mais.

	E estou alimentando as informações dessa minha <div> com JSON, até ae tudo certo.

	Estou fazendo um for(), para reproduzir a mesma quantidade de informações que meu JSON.

	TUDO CERTO, A DIV E REPETIDA COM AS INFORMAÇÕES.

	O Problema é que tenho um <SELECT> dentro da div que preciso alimentar as informações dele com o JSON, repare que são somente 3 informações que ele recebe, tentei dar um for() para colocar as informações mais não da certo, e depois preciso pegar o valor do value desse <SELECT> em uma função externa(que já está pronta);