How would I get this to work - send to post from thick box

Question

I have the following javascript which talks to about 6 elements. The first three open a thickbox for media upload and what not upon clicking on a specified button, the last three target the input element that the src of that media should dumped too.

The problem I am having is that if I click on button #upload-background-image-one and then find a media I want, click "send to post" it gets inserted into: #background-size-three which is the third input. It should be placed into: #background-size-one but its not. in fact any button that is clicked to open a thick box media uploader will put the contents of "Send to Post" into the third input box.

So How do I target the specific input for each thick box that can be opened? (Which I thought I already was)

Js:

( function($) {
    $(document).ready(function() {

        // Show WP Thickbox with image uploader.
        $('#upload-background-image-one').click(function() {
            formfield = $('#background-size-one').attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-one').val(img_url);
            tb_remove();
        }

        // Show WP Thickbox with image uploader.
        $('#upload-background-image-two').click(function() {
            formfield = $('#background-size-two').attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-two').val(img_url);
            tb_remove();
        }

        // Show WP Thickbox with image uploader.
        $('#upload-background-image-three').click(function() {
            formfield = $('#background-size-three').attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-three').val(img_url);
            tb_remove();
        }
    });

})(jQuery);

Answer 1

The correct way to do this is to:

    $('#upload-background-image-one').click(function() {
        formfield = $('#background-size-one').attr('name');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-one').val(img_url);
            tb_remove();
        }

        return false;
    });

because when you click on a button you instantiate a call back function you can do everything in that function. Scope is then tied to that fucntion