jQuery selector fails when ID contains square brackets

Question

I have a php script that creates a number of inputs whose ID's are in an array. I am trying to check the value in the clicked one but it fails due to the selector being an array, I think. The code I'm using is below. The amt var is undefined. If I change the code to not use arrays, it works. Is there a way to access an ID that is an array element? Here is my jsfiddle.

$(".map-price").keyup(function(event) {
  var id = event.target.id;
  var amt = $("#" + id).val();
  console.log(id + ' ' + amt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
  <input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>

Answer 1

You can pass the whole element into jquery:

$(".map-price").keyup(function(event) {
  var amt = $(event.target).val();
  console.log(event.target.id + ' ' + amt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
  <input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>