Upload Multiple Separate Files with PHP

I have the following form. It should allow the user to input multiple separate client names & attach an image next to each.

FTR, it outputs the concatenated text inputs perfectly, however only ever uploads the first image. Why is that?

Here’s a Fiddle, if needed: https://jsfiddle.net/oLsz2u0y/

$(function () {

    // Initially hide both divs
    $("#bulkContainer").hide();
    $(".individual").hide();

    // Listen for changes in the radio button selection
    $("input[name='bulkPayments']").change(function() {
      if ($(this).val() === "Yes") {
        // Show the bulk div and hide the individual div
        $("#bulkContainer").show();
        $(".individual").hide();
      } else if ($(this).val() === "No") {
        // Show the individual div and hide the bulk div
        $("#bulkContainer").hide();
        $(".individual").show();
      }
    });

    // Initialize the counter for generating unique names and IDs
    var counter = 1;

    // Add more sets when the "Add 1 more" button is clicked
    $("#addMore").click(function(event) {
      event.preventDefault(); // Prevent the default form submission
      // Clone the "bulk" section and update the attributes
      var newBulkSection = $(".bulk:first").clone();
      // Increment the counter for the next set and update the IDs and names
      counter++;
      newBulkSection.find("input[type=text]").attr("id", "clientName" + counter).attr("name", "clientName" + counter);
      newBulkSection.find("input[type=file]").attr("id", "attachments" + counter).attr("name", "attachments" + counter);
      // Clear input values in the new section (optional)
      newBulkSection.find("input[type=text]").val("");
      newBulkSection.find("input[type=file]").val("");
      // Append the newly modified section to the container
      $("#bulkContainer").append(newBulkSection);
      // Show the newly added section
      newBulkSection.show();
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<form action="data.php" method="POST" enctype="multipart/form-data">

          <div class="form-group">
            <label>Bulk Payments *:</label>
            <div class="radio">
              <label>
                <input type="radio" name="bulkPayments" value="Yes"> Yes
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="bulkPayments" value="No"> No
              </label>
            </div>
          </div>

          <div id="bulkContainer" style="display:none">
            <div class="bulk">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="clientName1">Client Name *:</label>
                    <input type="text" class="form-control" id="clientName1" name="clientName1" placeholder="" required autocomplete="one-time-code">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="attachment1">Attachment:</label>
                    <input type="file" class="form-control-file" id="attachment1" name="attachment1">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <button id="addMore" class="btn">Add 1 more</button>
          
 </form>

I am using the following PHP to grab the form data:

// Initialize an array to store the client names
$clientNames = array();

// Loop through the input fields (maximum of 10?)
for ($i = 1; $i <= 10; $i++) { // Adjust the loop limit according to the number of fields
    $fieldName = "clientName" . $i;

    // Check if the field exists and has a value
    if (isset($_POST[$fieldName]) && !empty($_POST[$fieldName])) {
        // Add the client name to the array
        $clientNames[] = $_POST[$fieldName];
    }
}

// Join the client names using the pipe (|) symbol
$clientNamesString = implode("|", $clientNames);

// Output the result
echo "Client Names: " . $clientNamesString;

// Initialize an array to store the uploaded file names
$uploadedFileNames = array();

// Initialize a directory where you want to store the uploaded files
$uploadDirectory = "../uploads";

// Loop through the file input fields
for ($i = 1; $i <= 10; $i++) { // Adjust the loop limit according to the number of fields
    $fieldName = "attachment" . $i;

    // Check if a file was uploaded for this field
    if (isset($_FILES[$fieldName]) && $_FILES[$fieldName]['error'] === UPLOAD_ERR_OK) {
        // Generate a unique filename to avoid overwriting existing files
        $uniqueFileName = uniqid() . "_" . $_FILES[$fieldName]['name'];

        // Move the uploaded file to the upload directory
        if (move_uploaded_file($_FILES[$fieldName]['tmp_name'], $uploadDirectory . $uniqueFileName)) {
            // Add the uploaded file name to the array
            $uploadedFileNames[] = $uniqueFileName;
        }
    }
}

// Join the uploaded file names using the pipe (|) symbol
$uploadedFileNamesString = implode("|", $uploadedFileNames);

// Output the result
echo "Uploaded File Names: " . $uploadedFileNamesString;