replaceWith while keeping original button index value?

replaceWith while keeping original button index value?

I am trying to replace all input type button and submits with 'link' versions.

so a [_SEARCH_] button becomes SEARCH

But if I have multiple on each page, it only uses the value of the first button it finds on that page, instead of using the value of the index of the button that was just replaced.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
   $(":button").replaceWith("<a>" + $(":button").val() + "</a>");
   $(":submit").replaceWith("<a>" + $(":submit").val() + "</a>");
});
//--></script>

<form action="test.php"?>
  <input type="text" value="123" name="test">
  <input type="button" value="BACK">
  <input type="button" value="FORWARD">
  <input type="submit" value="SUBMIT">
</form>


I'd expect to see:
BACK
FORWARD
SUBMIT


But its not reserving the value from the button it replaces, instead its using the value of the first button it finds on the page, which then results in:
BACK
BACK
SUBMIT

How can I make it use the value of the button that is currently being replaced?