I'm trying to get a working block of code to confirm email addresses before a form is allowed to be submitted. This first block of code works perfectly for the first element of my collection. I don't understand how to target the rest of the collection after more parts are added.

$(document).ready(function () {
  $('.email, .confirm').on('blur input', function () {
    if ($('.email input').val() != $('.confirm input').val()) {
      $('.Submit').attr("disabled", "disabled"); 
      if ($('.warningText').length > 0 || $('.confirm input').val() == '') {
        return; 
      }
      else { 
        $('<p class="warningText"><font color="red">The email addresses you entered do not match.</font></p>').insertAfter('.confirm');
      }
    }
    else {
      $('.warningText').remove();
      $('.Submit').removeAttr('disabled');
    }
  });
});

Here is the block that I've been trying to figure out. Any help would be appreciated. My Forms Version is 10.4.5.316.

$(document).ready(function () {
  $('a[ref-id="q14"]').click(function () { //after "Add" button is clicked
    var setCount = $(".cf-collection-block .rpx").length; 
    var emailFieldID = "#Field17(" + setCount + ")"; 
    var confirmFieldID = "#Field19(" + setCount + ")"; 
    alert(setCount + ", " + emailFieldID + ", " + confirmFieldID);
  });
  for (let i = 0; i < setCount; i++) {
    $(document).on('blur', '.cf-collection-block .rpx', function () {
      if ($("#Field17(" + i + ")").val() != $("Field19(" + i +")").val()) {
        alert("Checked for !=");
        $('.Submit').attr("disabled", "disabled");
        if ($('.warningText').length > 0 || $("Field19(" + i +")").val() == '') {
          return;
        }
        else {
          $('<p class="warningText"><font color="red">The email addresses you entered do not match.</font></p>').insertAfter(confirmFieldID);
        }
      }
      else {
        $('.warningText').remove();
        $('.Submit').removeAttr('disabled');
      }
    });
  }
});