Using Javascript to update hidden form fields with an image file name on seperate form pages

I have a customized Django wizard_form.html which shows the user 3 different images on three different pages of my survey.

I am trying to use the below script to update 3 hidden form fields on 3 different pages with the contents of value="{{display_image}}" as a way of storing the filename of the images shown to the user in the Database

This works fine for the first page/image e.g.

<input id="id_9-slider_one_image" name="9-slider_one_image" type="hidden" value="P1D1.jpg"/>

But I cant seem to get it working on the second or third

<input id="id_10-slider_two_image" name="10-slider_two_image" type="hidden" />

Can anyone tell me what I am doing wrong?

My Code

{% if wizard.steps.current in steps %}      

<div class="image_rating">      
    <img src="{% static "survey/images/pathone/" %}{{display_image}}" 
         value="{{display_image}}" onload="updateInput1(this); updateInput2(this); updateInput3(this);"/>                                                                                   
</div>  



<script type="text/javascript">
    function updateInput1(ish) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById("id_9-slider_one_image").setAttribute(
    "value", valueAttribute)
}

function updateInput2(ish) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById("id_10-slider_two_image").setAttribute(
    "value", valueAttribute)
}

function updateInput3(ish) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById("id_11-slider_three_image").setAttribute(
    "value", valueAttribute)
}

</script>

Any helps is as always, much appreciated, Thanks.