jQuery - want to get input value for submit but it gets one and repeats

Question

I'm trying to replace all submit buttons with a span so cufon will work. The input still needs to be there so have done some css to hide it and overlay to span on top. My issue is getting the value from the input tag is proving quite diffcult. The code below gets the first input value (being 'search' from the search box at the top of the page, and then puts that value into all the spans, even for buttons that have different values (eg: send). This is a .NET page so the whole page is wrapped in one form tag. Any help is greatly appreciated.

jQUERY:

   jQuery(document).ready( function() {
            jQuery(".button-wrap input.button").each(function() {
            var values = jQuery(".button-wrap input").attr('value');
            jQuery(this).before("<span class='input-replacer'>" +values+ "</span>");
        }); 

Answer 1

Use this inside the .each() to get the value of the input you're currently on, also use .val() instead or .attr() to get that value, like this:

jQuery(document).ready( function() {
 jQuery(".button-wrap input.button").each(function() {
   var values = jQuery(this).val();
   jQuery(this).before("<span class='input-replacer'>" +values+ "</span>");
});