JQuery не идентифицирует класс как селектор

У меня есть две функции JQuery, одна из которых вставляет новую динамическую строку в форму при нажатии кнопки, а другая функция проверяет ячейку в этой строке.

var currentItem = 11;
$('#addnew').click(function(){
  currentItem++;
  $('#items').val(currentItem);
  var strToAdd = '<tr><td><select class = "form-control select2 productSelect" name = "product'+currentItem+'" id = "product'+currentItem+'" style = "width: 100%"> <option disabled selected value> -- select a Product -- </option>'+ <?php foreach ($productData as $product) { echo "'<option value = " . $product->product_id . ">" . $product->product_name . "</option>'+";}?> '</select> </td><td><input class = "form-control quantitySelect" name = "quantity'+currentItem+'" id  = "quantity'+currentItem+'"type = "text" /></td><td><input class = "form-control"  name = "freeIssue'+currentItem+'" id = "freeIssue'+currentItem+'" type = "text" /></td> <td align = "center"><button  class = "btn btn-danger" name = "close" id = "close" onclick = "SomeDeleteRowFunction(this)"><i class = "fa fa-close"></i></button></td></tr>';

  $('#data').append(strToAdd);


});

Здесь я беру имя класса productSelect в качестве идентификатора для второй функции, выполняющей проверку. Но он не распознал класс, и проверка не работает для строк, которые я добавляю в форму с помощью вышеуказанной функции.

  $('.productSelect').change(function () {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null ) {
    $('#quantity'+ numberPart[1]).prop('required',true);
  }
});

Так выглядит весь код

<script type='text/javascript'>

$(document).ready(function() {

$('.productSelect').change(function () {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null ) {
    $('#quantity'+ numberPart[1]).prop('required',true);
  }
});

var currentItem = 11;
$('#addnew').click(function(){
  currentItem++;
  $('#items').val(currentItem);
  var strToAdd = '<tr><td><select class = "form-control select2 productSelect" name = "product'+currentItem+'" id = "product'+currentItem+'" style = "width: 100%"> <option disabled selected value> -- select a Product -- </option>'+ <?php foreach ($productData as $product) { echo "'<option value = " . $product->product_id . ">" . $product->product_name . "</option>'+";}?> '</select> </td><td><input class = "form-control quantitySelect" name = "quantity'+currentItem+'" id  = "quantity'+currentItem+'"type = "text" /></td><td><input class = "form-control"  name = "freeIssue'+currentItem+'" id = "freeIssue'+currentItem+'" type = "text" /></td> <td align = "center"><button  class = "btn btn-danger" name = "close" id = "close" onclick = "SomeDeleteRowFunction(this)"><i class = "fa fa-close"></i></button></td></tr>';

  $('#data').append(strToAdd);


});

});

</script>