how to automatically add input field when a value entered and the cursor also focus newly created input field

i completed dynamically add row function but i want to, when a value exit the input field the button automatically add another row and the cursor also focus newly added row. i want to implement this functionalyty in my code for my php codignater project

my inputfield code

 <div style="height:200px;width:1200px;border:2px solid #ccc;overflow:auto;">
     <table id="rf_id">
         <div class="form-group row col-sm-5" id="rf">
             <tbody id="rf123">
                 <tr>
                     <td> </td>
                     <td> <input type="text" placeholder="Enter product RFID code"
                             id="rfid" class="form-control" name="rfid[]"></td>

                     <td> <i class="fa fa-trash-o delete_rfid"
                             style="font-size:25px;color:red"
                             onclick="removeOptionRow('0');"></i>
                         <i class="fa fa-plus-circle tr_rfid_add" id="tr_rfid_add"
                             style="font-size:25px;color:green" aria-hidden="true"
                             onclick="addFilterOptionRow();"></i>
                     </td>
                 </tr>
             </tbody>
         </div>
     </table>
 </div>


 <div class="form-group row">

     <div class="col-sm-4">
         <input type="submit" id="assign_save" class="btn btn-success margin-bottom"
             value="<?php echo $this->lang->line('save') ?>"
             data-loading-text="Adding...">

     </div>
 </div>

My input field image


dynamically add row function for this input field, its a working function.

$("#rfid").focus();

function removeOptionRow(filter_row) {
    $('#invrow' + filter_row).remove();

}
var filter_row = 1;

function addFilterOptionRow() {

    html = '<tr id="invrow' + filter_row + '">';
    html += '<td> </td>';
    html +=
        '<td><input type="text" placeholder="Enter product RFID code" id="rfid" class="form-control" id="option_name' +
        filter_row + '" name="rfid[]" ></td>';
    html += '<td> <i class="fa fa-trash-o delete_rfid" style="font-size:25px;color:red" onclick="removeOptionRow(' +
        filter_row + ');"></i>';
    html +=
        ' <i class="fa fa-plus-circle tr_rfid_add" onclick="addFilterOptionRow();" style="font-size:25px;color:green" aria-hidden="true"></i>';
    html += '</td>';
    //html+='</tr>';
    //html+='<td><a href="javascript:void(0);" onclick="removeOptionRow('+filter_row+');">Remove</a></td>';
    html += '</tr>';
    $('#rf123').append(html);
    filter_row++;
    //  $("#rfid").focus();
    return false

}

expected:
i want to automatically add row when the value exit ,eg: i enter ‘A’ input to the input field ,the add button automatically add another input field.i try followying code but add button automatically click after defined time without entering input.

$(document).ready(function(){
 $('#tr_rfid_add').click(function(){
    });
    if($('.#rfid').val()){
  // set time out 5 sec
     setTimeout(function(){
        $('#tr_rfid_add').trigger('click');
    }, 4000);
}
});

I hope someone will give a correct solution.
thank you