getting value of sibling input that is dynamically created with jquery

Question

I have a ajax returned value that is a json array. I then use .each() to append the values to a table. I include a button in each row to select the paticular row. How do I get the value of the sibling 'editTemplateId' to select that particular row.

heres the code

ajax call

   $.ajax({
        url: '/php-list/ajax/',
        type: 'POST',
        data: {method: 'loadTemplatesGrid'},    
        dataType: 'json',                         
        success: function(data){                 
            $("#templatesGridTable").find("tr:gt(0)").remove();                            

            $.each(data, function(i, item) {  
                $('#templatesGridTable > tbody:last').append('<tr><td id="templateTitle"><h4>'+item.d+'</h4></td><td><form method="post"><input type="text" name="editTemplateId" id="editTemplateId" value="'+item.a+'"><input type="button" class="submit" type="button" id="editTemplate" name="editTemplate" value="Edit Template" onclick="editTemplateClick();"></form></td></tr>');                
            });  
        }
  });

the jquery function(s)

this one just alerts a blank message

function editTemplateClick(){  
    alert($(this).siblings('#editTemplateId').val());
}

this one just alerts the top rows id value

function editTemplateClick(){  
    alert($('#editTemplateId').val());
}

this also just alerts a blank message

 function editTemplateClick(){  
    alert(  $(this).parent().find('#editTemplateId').val() );
 }

any help greatly appreciated

Answer 1

 $(document).ready(function () {
  $('#templatesGridTable').click(function (event) {
    alert($(event.target).prev().val());
  });
 });

found the answer myself