Javascript multiple timer countdowns

Question

I have a page which is a list of products loaded from the database. Each product has a date field that is also loaded from the database. Each product is contained within a div and a countdown timer script is also loaded within that div. The date associated with the product is used to count the timer down. This date is set to a hidden field with the div which the script can access.So each product div basically looks like this:

<div id="prod1">
<input type="hidden" value"targetdate1"/>
<script type="text/javascript" src="countdown.js"></script>
</div>

<div id="prod2">
<input type="hidden" value"targetdate2"/>
<script type="text/javascript" src="countdown.js"></script>
</div>

<div id="prod3">
<input type="hidden" value"targetdate3"/>
<script type="text/javascript" src="countdown.js"></script>
</div>

<div id="prod4">
<input type="hidden" value"targetdate4"/>
<script type="text/javascript" src="countdown.js"></script>
</div>
 .......

So, essentially the script will be loaded multiple times in a page. And each script should only read the hidden field contained within its own div. I tried to find a way to do this using jquery selectors/javascript but nothing works.

Answer 1

Try following code in your countdown.js :

document.getElementsByTagName("script")[pos].parentElement  // pos will the serial number of the script tag

Now once the div is seelected you can work on it.