jQuery - Append an Image and Handle the Click Event

In a web application that I developed I was asked to modify the contents of on input tag when a buttom was clicked. Since the application was designed to use the same JSP page for all table edits I didn't want to create a custom JSP page for this table. So I added the button using jQuery.

Here is the JSP for the page:

<jsp:include page="../genBase/recordEdit.jsp" />
<script>
$(document).ready(function(){ 
$('#dispurlLinkToFile').after(' <img title="Generate URL location" id="imgUrlLinkToFile" style="border-top-color: currentColor; border-right-color: currentColor; border-bottom-color: currentColor; border-left-color: currentColor; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;" alt="Generate URL location" src="../images/max1t.gif"/>');
$('#imgUrlLinkToFile').click(function() {
 $('#dispurlLinkToFile').val('https://ABC.XYZ.org/ProposalDev/Proposals/'+$('#dispinternalRefNum').val().replace(/-/g,"_")+'.zip');});
});
</script>

Here's what the page is doing:
The global edit page, "recordEdit.jsp", is loaded.
The jQuery script, "$('#dispurlLinkToFile').after", is adding an icon after the input field with the id of "dispurlLinkToFile". The image tag is assigned an id of "imgUrlLinkToFile".
The jQuery script for the "imgUrlLinkToFile" click function takes the vale from the tag with the id "dispinternalRefNum", replaces "-" with "_", which gets added to "https://ABC.XYZ.org/ProposalDev/Proposals/" and written to "dispurlLinkToFile".
So we go from our original:

To the same with or image added:

Then when the button is clicked the field is populated: