Hi jquery experts…
I have 3 input element like below:
HTML Code:
<input class='input'  type='text' name='mat_name' id='mat_name' />
<input class='input'  type='text' name='mat_value' id='mat_value' /> 
<input class='input_hidden' type='text' name='mat_unit' id='mat_unit'/>
First input: material name (like cheese)
Second input: material value (like 10)
Third input: material unit (like gram)

These inputs must add several times in one form and have different value. I want when user focus on second input if the first input complete next show third input. Simply:

When focus on second input:
If (first input != ""){
Mat_unit.show
} else {
Alert "material name is empty"
}

I write below html and js on base Jquery:
HTML Code:
<html>
<head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="morteza.js"></script>
		<style>
		.input_hidden {	display: none;}
		</style>
		
</head>

<body>
<div id="addfild">Click me for Insert Materials!</div>
<input type="hidden" id="id" value="1">
</body>

</html>
Code:
$(document).ready(function(){
	
   $("#addfild").live("click", function(){
   	var id = document.getElementById("id").value;
      $(this).after("<p id='row" + id + "'>  <input class='input'  type='text' name='mat_name[]' id='mat_name" + id + "'  size='50'  />   <input class='input'  type='text' name='mat_value[]' id='mat_value" + id + "' size='20٪'  />  <input class='input_hidden'  type='text' name='mat_unit[]' id='mat_unit" + id + "' size='20٪'  /><p>");
	  
	  
	      $('#mat_value' + id).bind('focus', function(){
        var matnam = $('#mat_name' + id).val();
        if ($.trim(matnam) != '') {
            
            $('#mat_unit' + id).show();
            
        }
        else {
            alert('First input is empty');
        }
        
    });
	  
	   id = (id - 1) + 2;
    document.getElementById("id").value = id;
	  
	  
    });

}); // ready page
But these codes don’t work! Can you help me?