JSFiddle - React, Tailwind, and code Playground

by SullysRants

HTML

<form>

  <div class="attachment-row">
    <input type="file" class="input-field" name="attachment[]">
  </div>

  <div onClick="addMoreAttachment();" class="icon-add-more-attachemnt" title="Add More Attachments">
    <img src="https://phppot.com/wp-content/themes/solandra/images/phppot-logo.png" alt="Add More Attachments">
  </div>

</form>

JavaScript

jQuery(document).ready(function() {
  $cnt = 1;
  jQuery('#add-photo-button').click(function() {
    if ($cnt == 4) {
      //$('#add-photo-button').hide();
      $('#add-photo-button').prop('disabled', true);
    }
    $cnt++;
    var current_count = jQuery('input[type="file"]').length;
    var next_count = current_count + 1;

    jQuery('#file-upload').prepend('<input type="file" name="photo_' + next_count + '" />');

  });

});