Unable to save data in newly added row through js

Question

I have to read data from csv file, show them in tabular form in index page.Each row in table will have edit, delete button, when user will click on edit that particular row should become editable and edit and delete button will be raplace by save button. User can edit, delete those rows and also can add new empty row, input some data. each newly added row will have save button. When user click on save, it will be saved again in csv file.

index.html

<style>
.hide{
    display:none;
}
</style>

<div class="row" align="center">
<h1>Products Description</h1>
 </div>
 <br /><%sn="0"%>
 <div class="container">
<table class="table table-striped">
<thead>
    <tr>
          <th>#</th>
        <th>Product Name</th>
        <th>Description</th>
        <th>Brand Name</th>
        <th>Action</th>
    </tr>
</thead>
    <tbody>
        <%@csv_table.each do |row|%>
            <tr class="mtr">
                    <% row.each do |key, value| %>
                            <td class="value"><%= value %></td>
                    <% end %>
                    <div>
                        <td>
                            <%=link_to "Edit", "#", class: "edit"%>|
                          <%=link_to "Delete", "#", class: "delete"%>
                    </td>
                </div>
            </tr>
            <tr class="dtr hide">
                <% row.each do |key, value| %>
                        <%if key.eql?"Id"%>
                            <td><%=value%></td>
                        <%else%>
                            <td><%= text_field_tag :login_aei2, value, class: 'form-control'%></td>
                        <%end%>
                    <% end %>
                <td>
                <%=link_to "Save", "#", remote: true,  class: "save"%>
              </td>
            </tr>
            <% sn = (row.first.second.to_i + 1).to_s%>
            <%content_tag :div,'', id:'id_counter', data:{source: sn}%>
        <%end%>
    </tbody>
</table><%=link_to "Add row", "#", class:"new_row"%>

javaScript

    <script>
        $(document).ready(function(){

    function saveData(){
        alert("-----------");
    }

    function get_cell_data(e){
        e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    return target;
    }

    $(".edit").click(function(){
        var $tr = $(this).closest("tr");
        $tr.addClass("hide");
        $(this).closest('tr').next('tr').removeClass("hide");
        event.preventDefault();
    });

    $(".delete").click(function(e){
        var target = get_cell_data(e);
        var cells = target.getElementsByTagName("td");
        $.ajax({
    url: 'products/delete_row',
    type: "get",
    dataType: 'json',
    data: {"id": cells[0].innerHTML}
  });
  window.location.reload();
    });

    $(".new_row").click(function(){
        $('table tbody').append('<tr class="dtr"><td><%=sn%></td><td><%= text_field_tag :login_aei2,'', class: 'form-control'%></td><td><%= text_field_tag :login_aei2,'', class: 'form-control'%></td><td><%= text_field_tag :login_aei2,'', class: 'form-control'%></td><td><%=link_to "Save", "#", remote: true, id: "save", onclick:"saveData()"%></td></tr>');
        event.preventDefault();
    });

    $(".save").click(function(e){
        var target = get_cell_data(e)
    var cells = target.getElementsByTagName("td");

        $.ajax({
    url: 'products/save_data',
    type: "get",
    dataType: 'json',
    data: {"id": cells[0].innerHTML, "Product Name": cells[1].children[0].value, "Description":cells[2].children[0].value,"Brand Name":cells[3].children[0].value}
  });
  window.location.reload();
    });
});

Everything working fine but when I click on "add row" button it adds the new row. but when i click on save button on this new row, it does not do any thing, controller does not go to java script code which is written for on click save button. Please help thanks in advance.