jQuery Wildcard Selector Failure

This code is the same code I am attempting to use and the wildcard selector is not working.

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table bordered-1">
  <thead style="background-color:#EEE;">
    <th>Additional Hazards</th>
    <th colspan="2">Control(s) Implemented</th>
  </thead>
  <tbody id="hazardItems">
    <tr><td><div class="glyphicon glyphicon-plus" style="font-size: 20px;" title="Add New Item" id="addHazardItem"></div></td></tr>
  </tbody>
</table>

CSS

.table-borderless td, .table-borderless th, .table-borderless tr td {
  border: 0;
}

.table-border-1 td, .table-border-1 th, .table-border-1 tr td {
  border: 1px solid lightgrey;
}

.form-labels { font-size: 1.25em; }
.text-sm { font-size: .75em; }

.cbx-medium { min-height: 12px; }
.container-60 { max-width: 60%; }
.container-80 { width: 80%; }
.container-pad { min-width: 80%; }

.input-date { width: 50px; }
.borderless { border: 0; }
.bordered-1 { border: 1px solid lightgrey; }
.full-width { width: 100%; }
.center-content { margin-left: auto; margin-right: auto; }
.cell-space-5 { margin-bottom: 5px; }

#addHazardItem:hover, [id^="removeitem"] { cursor: pointer; }

JavaScript

$(document).ready(function() {
    // Handler for removal of hazard items rows dynamically
    $("[id^=removeitem]").click(function() {
      var elmId = $(this).attr('id');
      alert(elmId);
    });

    // Handler for addition of hazard items rows dynamically
    var hiCount = $('#hazardItems > tr').length;
    $('#addHazardItem').click(function() {
      var hiTable = $('#hazardItems');
      var htmlOut = '                    <tr id="row' + (hiCount) + '">\n' +
          '                      <td style="width: 50%"><input style="width: 100%;" type="text"></td>\n' +
          '                      <td style="width: 45%"><input style="width: 95%;" type="text"></td>\n' +
          '                      <td style="width: 5%"><div class="glyphicon glyphicon-trash" style="font-size: 20px;" title="Remove this row" id="removeitem' + hiCount + '"></div></td>\n' +
          '                    </tr>';
      hiTable.append(htmlOut);
      hiCount = $('#hazardItems > tr').length;
    });
  });