JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="jquery.min.js"></script>
<section id="main-content">
<section class="wrapper">
<!-- BASIC FORM ELELEMNTS -->
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>
<form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
<input type="hidden" class="form-control" name="user_id" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Picture 1</label>
<div class="col-sm-10 upload_div">
<div style="float:left;width:30%;">
<input type="file" name="userfile[]">
</div>
</div>
</div>
<div class="other_files">
</div>
<div class="form-group">
<div class="col-sm-10">
<a href="javascript:void(0);" class="btn btn-primary add_btn" id="add_btn" style="width:20%;margin-right:col-sm-100px;">Add</a>
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</div>
</form>
</div>
</div><!-- col-lg-12-->
</div><!-- /row -->
</section>
</section>
<script type="text/javascript">
$(document).ready(function(){
var max_upload=5;
var addbutton=$('.add_btn');
...