title: How to add "input type=file" buttons dynamically in a multiple file upload formula [PHP, MySQL & JS]
body: <p>I have a problem by adding "<b>"input type=file"</b>" dynamically.<br></p>
  
  <p>I have a formula where the user can select multiple files and can type a title under each selected file, before the user click on the <b>Upload</b> button.
  When the forumla gets loaded, i want that there is only 1 select button and 1 title field. If the user selected 1 file, then there should show up a new "select file" button and a new title field. (Add buttons dynamically)<br>
  <br>
  I think my problem has something to do with <b>file.setAttribute("name", "sel_file");</b> in the JS part and with this for loop<br>
  <b>for($mf = 0; $mf &lt; count($_FILES['sel_file']['tmp_name']); $mf++)</b>
  <br>in the php part.
  It seems php cannot work with "sel_file"</p>
  
  <p><br>
  Anyway, here is my code (<b>The whole code is in 1 php file</b>):<br>
  (and ignore the security issues, I will do this later)</p>
  
  <p><br>
  <b>PHP Part</b></p>
  
  <pre><code>&lt;?php
  $db = mysqli_connect("localhost", "root", "", "xy");
  
  // If upload button is clicked ...
  if (isset($_POST['upload']))
  { // Get post title
    $post_title = mysqli_real_escape_string($db, $_POST['post_title']);
  
    $sql_p = "INSERT INTO posts (post_title) VALUES ('$post_title')";
    if (mysqli_query($db, $sql_p))
    {
      $post_id = mysqli_insert_id($db);
      for($mf = 0; $mf &lt; count($_FILES['sel_file']['tmp_name']); $mf++)
      {
        $file = $_FILES['sel_file']['name'][$mf];
        $tmp_file = $_FILES['sel_file']['tmp_name'][$mf];
        $target = "files/". basename($file);
        $file_title = (isset($_POST['file_title'][$mf])?$_POST['file_title'][$mf]:"");
        if (move_uploaded_file($tmp_file, $target))
        {
          echo "File: ".$file." &amp;#10004;&lt;br&gt;";
        }
        else
        {
          echo "File: ".$file." - Upload failed&lt;br&gt;";
        }
        $sql_f = "INSERT INTO files (file, file_title, post_id) VALUES ('$file', '$file_title', $post_id)";
        mysqli_query($db, $sql_f);
      }
    }
  }
  ?&gt;
  </code></pre>
  
  <p><b>HTML &amp; JS Part</b></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Project | XY&lt;/title&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;script&gt;
        window.addEventListener("load", function()
        {
          document.getElementById("add").addEventListener("click", function()
          {
            // Create a div
            var div = document.createElement("div");
  
            // Create a file input
            var file = document.createElement("input");
            file.setAttribute("type", "file");
            file.setAttribute("name", "sel_file"); 
            // Create a text input
            var text = document.createElement("input");
            text.setAttribute("type", "text");
            text.setAttribute("name", "file_title");
  
            // add the file and text to the div
            div.appendChild(file);
            div.appendChild(text);
  
            //Append the div to the container div
            document.getElementById("container").appendChild(div);
          });
        });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="frame_form"&gt;
        &lt;form method="POST" action="TEST.php" enctype="multipart/form-data"&gt;
          &lt;div id="post_title"&gt;
            &lt;input type="text" name="post_title" placeholder="* Post Title *"&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;form&gt;
             &lt;div&gt;
                &lt;input type="button" value="add" id="add" /&gt;
                  &lt;div id="container"&gt;&amp;nbsp;&lt;/div&gt;
             &lt;/div&gt;
           &lt;/form&gt;
          &lt;br&gt;
          &lt;div id="upload_button"&gt;
            &lt;button type="submit" name="upload"&gt;+upload&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><br>
  Before i had no JS code, instead i had the following code, and it worked very well, but was not dynamically ...:<br></p>
  
  <pre><code>    &lt;?php $sfq = 2 ?&gt;
      &lt;?php
          for ($sf=0; $sf&lt;$sfq; $sf++){ ?&gt;
          &lt;b&gt;&lt;?php echo $sf+1 ?&gt;&lt;/b&gt;&lt;br&gt;
          File: &lt;input type="file" name="sel_file[&lt;?php echo $sf ?&gt;]"&gt;&lt;br&gt;
          Title: &lt;input name="file_title[&lt;?php echo $sf ?&gt;]"&gt;&lt;br&gt;
      &lt;?php } ?&gt;
  </code></pre>