javascript - Transfer list item data from one page to another -

i using ionic 2 , trying transfer data 1 page another. more 1 list item on first page(quicksearch) page(quicksearchdetail). have picture below demonstrate this.

when click on list should transfer data next page, having issue first list item being transferred irrespective of item click (over writing local storage data).

quicksearch template list item

<ion-item *ngfor="let item of items" (click)="gotoquicksearchdetail(item._id)">   <p id="clusternameformvalue">{{ item.clustername }}</p>   <p id="currentbunameformvalue">{{ item.currentbuname }}</p>   <p id="technologyformvalue">{{ item.technology }}</p>   <p id="customerformvalue">{{ item.customer }}</p>   <p id="clusterheadnumberformvalue">{{ item.clusterheadnumber }}</p> </ion-item> 

quicksearch.ts

gotoquicksearchdetail(){   var clustername: = clustername = document.getelementbyid("clusternameformvalue").innerhtml;   var currentbuname: = currentbuname = document.getelementbyid("currentbunameformvalue").innerhtml;   var technology: = technology = document.getelementbyid("technologyformvalue").innerhtml;   var customer: = customer = document.getelementbyid("customerformvalue").innerhtml;   var clusterheadnumber: = clusterheadnumber = document.getelementbyid("clusterheadnumberformvalue").innerhtml;    localstorage.setitem('clustername', clustername);   localstorage.setitem('currentbuname', currentbuname);   localstorage.setitem('technology', technology);   localstorage.setitem('customer', customer);   localstorage.setitem('clusterheadnumber', clusterheadnumber);    this.navctrl.setroot(quicksearchdetail); } 

quicksearchdetail item

<ion-list>     <ion-item>       <p id="clusternamedetail"></p>       <p id="currentbunamedetail"></p>       <p id="technologydetail"></p>       <p id="customerdetail"></p>       <p id="clusterheadnumberdetail"></p>    </ion-item> </ion-list> 

quicksearchdetail.ts

ionviewdidload() {     document.getelementbyid('clusternamedetail').innerhtml = localstorage.getitem('clustername');     document.getelementbyid('currentbunamedetail').innerhtml = localstorage.getitem('currentbuname');     document.getelementbyid('technologydetail').innerhtml = localstorage.getitem('technology');     document.getelementbyid('customerdetail').innerhtml = localstorage.getitem('customer');     document.getelementbyid('clusterheadnumberdetail').innerhtml = localstorage.getitem('clusterheadnumber'); } 

try use this

//quicksearch template list item  <ion-item *ngfor="let item of items" (click)="gotoquicksearchdetail(item)">   <p id="clusternameformvalue">{{ item.clustername }}</p>   <p id="currentbunameformvalue">{{ item.currentbuname }}</p>   <p id="technologyformvalue">{{ item.technology }}</p>   <p id="customerformvalue">{{ item.customer }}</p>   <p id="clusterheadnumberformvalue">{{ item.clusterheadnumber }}</p> </ion-item>   //quicksearch.ts gotoquicksearchdetail(item: any){   var clustername: = clustername = item.currentbuname;   var currentbuname: = currentbuname = item.currentbuname;   var technology: = technology = item.technology;   var customer: = customer = item.customer;   var clusterheadnumber: = clusterheadnumber = item.clusterheadnumber;    localstorage.setitem('clustername', clustername);   localstorage.setitem('currentbuname', currentbuname);   localstorage.setitem('technology', technology);   localstorage.setitem('customer', customer);   localstorage.setitem('clusterheadnumber', clusterheadnumber);    this.navctrl.setroot(quicksearchdetail); 

you have loop items. in case each items contain same id. reason when try find value element id gives 1st item.