Multiple images with Media Uploader on front-end

You can’t have two buttons with the same ID (#upload_image_button) as IDs are supposed to be unique.

You should give the buttons a class and give the ID equal to that of the name of the associated input.

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="button upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="button upload_image_button" type="button" value="Upload Image" />

Then in your JS you should trigger wp_media by the button’s class.

$('.upload_image_button').click(function(e) { 

When the button is clicked you’ll then need to get the ID of the button that is clicked

var target_input = $(this).attr('id');

Then when the image is returned from the uploader you’ll have to populate the correct input with the value:

custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('input[name=" + target_input + "]').val(attachment.url);
});

Hope that helps.