JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <form>
    <div>
      <div class="form-group hirehide is-empty is-fileinput width100">
        <div class=socialmediaside2>
          <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
          <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm">
                <button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
              </span>
          </div>
        </div>
      </div>
      <div class=upload-demo>
        <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
      </div>
    </div>
  </form>
</div>

CSS

img.portimg {
      display: none;
      max-width: 200px;
      max-height: 200px;
    }

JavaScript

function readURL() {
      var $input = $(this);
      var $newinput = $(this).parent().parent().parent().find('.portimg');
      if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          reset($newinput.next('.delbtn'), true);
          $newinput.attr('src', e.target.result).show();
          $newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
        }
        reader.readAsDataURL(this.files[0]);
      }
    }
    $(".fileUpload").change(readURL);
    $("form").on('click', '.delbtn', function(e) {
      reset($(this));
    });

    function reset(elm, prserveFileName) {
      if (elm && elm.length > 0) {
        var $input = elm;
        $input.prev('.portimg').attr('src', '').hide();
        if (!prserveFileName) {
          $($input).parent().parent().parent().find('input.fileUpload').val("");
          //input.fileUpload and input#uploadre both need to empty values for particular div
        }
        elm.remove();
      }
    }