How to rename multiple files on a dynamic attachment upload form then insert the renamed file name in database?

Question

I would like to ask help with my current project. I have an application form that ask users to upload their attachments. Each application attachment varies from 1 to 10 and so I have to modify the current system that can only accept 1 upload per transaction. Here is the snippet of my attachment module.

    $(document).ready(function() {
  var html = '<tr><td><input class="form-control" type="file" name="FileToUpload[]" multiple=""></td><td><input class="btn btn-danger remove" type="button" name="remove" value="Remove"></td></tr>';

  var max = 10;
  var x = 1;

  $("#add").click(function() {
    if (x < max) {
      $("#table_field").append(html);
      x++;
    }
  });

  $("#table_field").on('click', '.remove', function() {
    $(this).closest('tr').remove();
    x--;

  });

});

Here is my HTML file

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

Upload attachments
<div class="input_field">
  <table id="table_field" class="table table-bordered">
    <tr>
      <th>
        Image
      </th>
      <th>
        Action
      </th>
    </tr>
    <tr>
      <td><input class="form-control" type="file" name="FileToUpload[]" multiple=""></td>
      <td><input class="btn btn-primary" type="button" name="add" id="add" value="Add"></td>
    </tr>
  </table>
</div>

<div class="form-group">
  <div class="g-recaptcha" data-sitekey="6LeGWochAAAAAJJYH17JqaBlkFJfSoJPvrPr2BI0"></div>
  <span id="captcha_error" class="text-danger"></span>
</div>

Here is the upload php I used previously.

//ATTACH IMAGES CODE
        $target_dir = "uploads/";
        $target_file = $target_dir . basename($_FILES["FileToUpload"]["name"]);
        $uploadOk = 1;
        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

        // Check if image file is a actual image or fake image
        if($_SERVER["REQUEST_METHOD"] == "POST") {
          $check = getimagesize($_FILES["FileToUpload"]["tmp_name"]);
          if($check !== false) {
            echo "File is an image - " . $check["mime"] . ".";
            $uploadOk = 1;
          } else {
            echo "File is not an image.";
            $uploadOk = 0;
          }
        }

        // Check if file already exists
        if (file_exists($target_file)) {
          echo "Sorry, file already exists.";
          $uploadOk = 0;
        }

        // Check file size
        if ($_FILES["FileToUpload"]["size"] > 5000000) {
          echo "Sorry, your file is too large.";
          $uploadOk = 0;
        }

        // Allow certain file formats
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
        && $imageFileType != "gif" && $imageFileType != "pdf" ){
          echo "Sorry, only JPG, JPEG, PNG & GIF & PDF files are allowed.";
          $uploadOk = 0;
        }

        // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
          echo "Sorry, your file was not uploaded.";
        // if everything is ok, try to upload file
        } else {
            $temp = explode(".", $_FILES["FileToUpload"]["name"]);
            $newfilename = round(microtime(true)) . '.' . end($temp);
          if (move_uploaded_file($_FILES["FileToUpload"]["tmp_name"], "uploads/" . $newfilename)) {
            echo "The file ". htmlspecialchars( basename( $_FILES["FileToUpload"]["name"])). " has been uploaded.";
          } else {
            echo "Sorry, there was an error uploading your file.";
          }
        }

I have made a transactional table named images that will store the ID and filename of each image.

Please help me transform my code to accept multiple image uploads.

Thank you