document.getelementByID()

[hell hansen]

Hi guys i need some help.
Im creating new invoice, and inside of invoice i've table.
and in this table user can add new rows clicking add new row button.

so in some table i have select field with drop down of prices, which the user must select the price.
so when is selectd the value on select box, i want the name of next input field change, because so that i can know which price was selected.
the default <tr></tr> is this one.

 <tr><td>1</td>
<select class="form-control" name="visafees" id="visafees">
 <?php
  $visafee = DB::getInstance()->query("SELECT id, fees_name from tbl_fees");
   if (!$sql->count()) {
   echo'<option>No record found</option>';
    } else {
    foreach ($visafee->results() as $row) {
     echo "<option value='{$row->id}'>{$row->fees_name}</option>";
      }
     }
      ?>
     </select> </td>
    <td><input type="text" class="form-control amountdue" name="amountdue[]" id="amountdue"></td>
    <td><input type="text" class="form-control payment"   name="paymen"></td>
      <td><input type="text" class="form-control amountremaining" name="amountremaining" readonly=""></td>
 <td><a class="remove" href="#" name="remove">Delete</a></td>
  <td></td>
 </tr>

so what im looking here is when is selected a price the value on select box, i must get this value and change the name of input with name="amountdue[]".

so this is working on first row, but when i click add new row this not working.
the javascript add new row is this one:

function addnewrow() {
        var n = ($('.detail tr').length - 0) + 1;
        // add two rows
        var tr = '<tr><td>' + n + '</td><td><input list="visatypes" class="form-control" name="visatypes[]" placeholder="select a visa type"/>\n\
 <datalist id="visafees"><option value="SAMI Fees"><option value="VFS Fees">  \n\
 <option value="Life Partner"> </datalist> </td>\n\\n\
<td><select id="visafees" name="visafees" class="form-control">\n\
<option value="6">Advertise</option>\n\
<option value="4">CA Certification</option>\n\
<option value="3">DHA Fees</option>\n\
<option value="7">Others</option>\n\
<option value="1">SAMI Fees</option>\n\
<option value="5">SAQA</option>\n\
<option value="2">VFS Fess</option>\n\
 </select ></td>\n\
<td><input type="text" name="amountdue[]" class="form-control amountdue" id="amountdue">\n\
<td><input type="text" name="payment[]" id="payment" class="form-control payment"></td > \n\
 < td > < input type = "text" name = "amountremaining[]" class = "form-control amountremaining" readonly = "" > < /td>\n\
< td > < a href = "#" class = "remove" > Delete < /a></td > < /tr>';

        $('.detail').append(tr);
    }

and the javascript which change the name of input field is this one:

 document.getElementById('#visafees').addEventListener('change', function (evt) {
        var type = this.selectedOptions[0].value;
        console.dir(this);
        document.getElementById('#amountdue').setAttribute('name', type);
    });

so the problem here is document.getElementByID, because is only chang when the page is loaded, or something like that, and when i add new row, the document.getElementById is not making effect. and return error
TypeError: document.getElementById(...) is null
Can you guys give some advices, how to salve it.