Hi, I almost have my code working however it's not working because the div's have the same id, because they are created automatically through php so I cannot name them myself. Here is my code:

Code:
<style>
div{border: 1px solid black; padding: 5px;}
</style>
<script>
function show(navigation)
{
var alli = document.getElementById('navigation').getElementsByTagName('a');
aam.value = alli[0]
mel.value = alli[1]
ipc.value = alli[2]
}
</script>




<div id="navigation" onClick="show()">
  <a href="http://www.google.com">Google.com</a> <br>
  <a href="http://www.yahoo.com">Yahoo.com</a> <br>
  <a href="http://www.bing.com">Bing.com</a>
</div>

<br>

<div id="navigation" onClick="show()">
  <a href="http://www.jack.com">jack.com</a> <br>
  <a href="http://www.ning.com">ning.com</a> <br>
  <a href="http://www.bill.com">bill.com</a>
</div>
<br>

<input type=text id=aam>
<input type=text id=mel>
<input type=text id=ipc>
I'm trying to make it so that when I click one a div, its specific contents get transferred to the input boxes below, it's doing so, however it only works for the first div. How would I make it work for all of the divs to correspond with its own specific children(a tags)?