html - how to target an external div in javascript -

i have situation:

<div id="first">   <div>     <p>text</p>   </div> </div> <div id="second">    <div>       <button class="button">click</button>    </div> </div> ... <div id="first"> ... </div> <div id="second"> ... </div> ... 

and on, structure repeats.

this structure created dynamically can't use specific class nor id first div.

i need retrieve text in first div when hit button in second div.

(note: need pure javascript solution, not jquery solution)

thanks

assuming have event handler button click, event handler:

function buttonclickhandler(e) {     var first = this.parentnode.parentnode.previoussibling;     var paragraphs = first.getelementsbytagname("p");     var text = paragraphs[0].textcontent; } 

if have common , known class names on the divs marked first , second, can make javascript code more insulated markup changes idea.

---

p.s. presume know should't have duplicate id values in html. code doesn't use them, should using class names instead of id values if you're going have duplicates.