jQuery Delete table rows that were dynamically added [duplicate]

I have a simple table that by default shows a single row, with an add button for users to add additional rows if required. I have a delete icon showing in the last column for users to delete a row if they made a mistake, however this only works for the first table row and doesn’t work for any rows the user has added themselves.

Here’s a sample of how this looks:

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type="text" class="form-control" autocomplete="off" placeholder="Serial" name="serial"></td><td></td><td></td><td></td><td><span class="glyphicon glyphicon-trash"></span></td></tr>";
    $("#shipmentConsignment").append(markup);
  });

  // Find and remove selected table rows
  $("#deleteRow").click(function() {
    $(this).closest('tr').remove();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<table id="shipmentConsignment" class="table table-condensed table-striped table-bordered">
  <thead>
    <th class="text-center" scope="col" width="20%">Serial</th>
    <th class="text-center" scope="col" width="15%">ID</th>
    <th class="text-center" scope="col" width="15%">Code</th>
    <th class="text-center" scope="col" width="45%">Description</th>
    <th class="text-center" scope="col" width="5%"></th>
  </thead>
  <tbody>



    <tr>
      <td><input type="text" class="form-control" autocomplete="off" placeholder="Serial" name="serial"></td>
      <td></td>
      <td></td>
      <td></td>
      <td id="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
    </tr>


  </tbody>
</table>


<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Item</button>