Refresh Javascript change function

Question

I am currently monitoring a change event on a table cell with ID drawing-n-1. all works, except when I delete this cell and then recreate it in Javascript. the event is no longer picked up. any help on this please

Code to monitor the cell value:

var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
    var data = $('#'+drawing_input).val();
    console.log(data);
});

html code to create the table:

<label for="myTable"><b>Drawings</b></label>
<table id="myTable" border="1" data-mini="true" >
  <tbody>
    <tr>
    <th>Drawing Number</th>
    <th>Description</th>
    <th>Sheet Number</th>
    <th>Issue</th>
    </tr>
    <tr>
    <td><textarea name="drawing-n-1" id="drawing-n-1"  /></textarea></td>
    <td><input name="drawing-d-1" type="text" /></td>
    <td><input name="drawing-s-1" type="text" /></td>
    <td><input name="drawing-i-1" type="text" /></td>
    </tr>
  </tbody>
</table>

Function used to delete row and recreate the row

function clear_drawing_Table() 
{
    var table = $('table#myTable tbody');
    for(var i = 1;i<document.getElementById('myTable').rows.length;){
        document.getElementById("myTable").deleteRow(i);
    }
    len = document.getElementById('myTable').rows.length -1;    
    table.append(                       
    '<tr><td><textarea name="drawing-n-'+ (len+1)+'" type="text" /></td><td><input name="drawing-d-'+ (len+1)+'" type="text"/></textarea></td><td><input name="drawing-s-'+ (len+1)+'" type="text" /></td><td><input name="drawing-i-'+ (len+1)+'" type="text" /></td></tr>'  
    );
    $("#myTable").trigger('create');
}