Function in javascript run on each element

Good morning friends.

I have the following problem. I'm developing a variable that contains a list of products.

var produtos = new Array()

produtos[produtos.length]="OUTROS|Catchup|1 sache|10"
produtos[produtos.length]="OUTROS|Mostarda|1 sache|15"
produtos[produtos.length]="OUTROS|Maionese|1 sache|40"
produtos[produtos.length]="OUTROS|Molho branco|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho bolonhesa|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho madeira|1 colh sopa|10"
produtos[produtos.length]="OUTROS|Molho agridoce|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho rose|1 colh sopa|50"
produtos[produtos.length]="OUTROS|Catchup|1 sache|10"
produtos[produtos.length]="OUTROS|Pizza calabresa/frango catupiry e quatro queijos|1 fatia|400"
produtos[produtos.length]="OUTROS|Lasanha|2 colh sopa|160"
produtos[produtos.length]="OUTROS|Cachorro quente|1 unid|420"
produtos[produtos.length]="OUTROS|Misto quente|1 unid|235"
produtos[produtos.length]="OUTROS|Cheese burguer|1 unid|300"

produtos.sort();

function lstprodutos(){
  var nomeprd="";
  var recallprd="";
  for (x=0;x<produtos.length;x++){
    subprod=produtos[x].split('|');
    if (recallprd!=subprod[0]){
      nomeprd+='<div class="listprod"><a href="javascript:escolha(\''+subprod[0]+'\')">'+subprod[0]+'</a></div>';
      recallprd=subprod[0];
    }
  }
  document.getElementById('produtos').innerHTML=nomeprd;
  document.getElementById('totalcal').innerHTML=0;
}

function escolha(item){
  var escolhido='';
  for (x=0;x<produtos.length;x++){
    subprod=produtos[x].split('|');
    if (item==subprod[0]){
      escolhido+='<div class="linha"><div class="item1"><a href="javascript:prato('+x+',\'null\')">'+subprod[1]+'</a></div><div class="item2"><a href="javascript:prato('+x+',\'null\')">'+subprod[2]+'</a></div><div class="item3"><a href="javascript:prato('+x+',\'null\')">'+subprod[3]+'</a></div></div>';
    }
  }
  this.document.getElementById('select').innerHTML=escolhido;
}

var item=new Array;

function prato(num,retira){
  var pratofeito="";
  var valocal=0;
  if (!isNaN(num)){
    elem = produtos[num];
    item.push(elem);
  }
  if (!isNaN(retira)){
    item.splice(retira,1)
  }
  for (i=0;i<item.length;i++){
    substring=String(item[i]);
    sub=substring.split('|');
    pratofeito+='<div class="item4"><a href="javascript:prato(\'null\','+i+')" title="Clique para remover">'+sub[1]+', '+sub[2]+'</a></div>';
    valocal=valocal+parseInt(sub[3]);
  }
  document.getElementById('escolha').innerHTML=pratofeito;
  document.getElementById('totalcal').innerHTML=valocal;
}

In this js, it takes the category of products, when I click it it opens the list of products, clicking it loads the value of each product on top, as if I was selecting the products of a meal.

That works according to the code below:

<div class="inputs_iden2">
  <label class="txt_input">
    <i class="fa fa-cutlery"></i>
    Lanche
  </label>
  <br>
  <div id="escolha"></div>
  <br>
  <div class="sel" id="sel" id="lanche">
    <div class='txt'>ESCOLHA UM GRUPO DE ALIMENTOS</div>
    <div class="options hide">
      <div>
        <a href="javascript:escolha('CEREAIS')">CEREAIS</a>
      </div>
      <div>
        <a href="javascript:escolha('HORTALICAS')">HORTALIÇAS</a>
      </div>
      <div>
        <a href="javascript:escolha('LEGUMINOSAS')">LEGUMINOSAS</a>
      </div>
      <div>
        <a href="javascript:escolha('FRUTAS')">FRUTAS</a>
      </div>
      <div>
        <a href="javascript:escolha('LEITE E DERIVADOS')">LEITE E DERIVADOS</a>
      </div>
      <div>
        <a href="javascript:escolha('CARNE E OVOS')">CARNE E OVOS</a>
      </div>
      <div>
        <a href="javascript:escolha('OLEOS E GORDURAS')">OLEOS E GORDURAS</a>
      </div>
      <div>
        <a href="javascript:escolha('DOCES')">DOCES</a>
      </div>
      <div>
        <a href="javascript:escolha('BEBIDAS')">BEBIDAS</a>
      </div>
      <div>
        <a href="javascript:escolha('OUTROS')">OUTROS</a>
      </div>
    </div>
  </div>
  <div class="container clearfix">
    <div id="HOTWordsTxt" style="display:block;clear:both;">
      <div class="divider">
        <div class="corpo">
          <div align="left">
            <p class="tit_list_ali" id="txt_H">Escolha um alimento</p>
            <div class="linha" id="linha">
              <div class="item1"><b>Alimento</b></div>
              <div class="item2"><b>Quantidade</b></div>
              <div class="item3"><b>Calorias</b></div>
            </div>
            <div id="select"></div> 
            <button class="btn_concluido" id="concluido">CONCLUIDO</button>
          </div>    
        </div>
      </div>
    </div>
  </div>
</div>

But I need to do this for 10 meals so that the user can choose the food from each meal.

I've already done select to select the product category list, so that it works just the click on the element you're manipulating, but when I click on the bottom div I can choose the product category it loads only on the first div. I never load the product into the select div I'm manipulating.

I know that Jquery has this that does this function.