JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.min.js"></script>
<div class="article_properties">

  <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
    <p style="display: inline">Page Number</p>
    <div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px">
      <p style="display: inline" class="pageNumber"></p>
    </div>
    <textarea style="display: none" class="inputNumber" name="pages"></textarea>

    <p>Image</p>
    <input style="padding: 0px" type="file" name="image" class="pageImg">
    <div class="imgContainer">
    </div>

    <p>Subtitle</p>
    <input type="text" name="subtitle">

    <p>Text</p>
    <textarea name="text" rows="4"></textarea>

    <input id="properties_btn" type="submit" value="Submit/Update" name="properties_submit">
    <hr style="border: 1px dotted lightgray; margin-bottom: 50px">
  </form>

  <a style="display: none; text-align: center; margin: 50px; font-size: 25px" class="expand" href="#"></a>
</div>
<!--End of article properties div-->

<div id="addOne">
  <p>+Add page</p>
</div>

<div class="nextBtn" style="display: none">
  <p>Finalize my article</p>
</div>

CSS

#addOne,
.nextBtn {
  cursor: pointer;
}

JavaScript

var numPagesTemp = 4;

var $CLONED_FORM = $('.article_properties_form:first').clone();
var $CLONED_EXPAND = $('.expand:first').clone();

function initializeForm($form, pageNum) {
  $form.find('.pageNumber').text(pageNum);
  $form.find('.inputNumber').text(pageNum);

  var validator = $form.validate({
    errorElement: 'div',

    rules: {
      image: {
        required: true,
        extension: "jpg|jpeg|png",
        minImageSize: {
          width: 600,
          height: 400
        }
      },

      subtitle: {
        required: true,
        minlength: 2,
        maxlength: 25
      },
      text: {
        required: true,
        minlength: 35,
        maxlength: 275
      }
    },

    messages: {
      image: {
        required: "This page needs an image",
        extension: "You're only allowed to upload jpg or png images."
      },

      subtitle: {
        required: "You have to provide a subtitle for this page!",
        minlength: "Your subtitle must be at least 2 characters long",
        maxlength: "Your subtitle must be less than 25 characters long"
      },
      text: {
        required: "Please enter text for this page",
        minlength: "Your text must be at least 35 characters long",
        maxlength: "Your text must be less than 275 characters long"
      },
    },
  });

  var $properties_btn = $form.find('properties_btn'),
    $imgContainer = $form.find('.imgContainer'),
    $pageImg = $form.find('.pageImg');

  $form.find('.pageImg').change(function() {
    $pageImg.removeData('imageSize');
    $imgContainer.hide().empty();

    var file = this.files[0];

    if (file.type.match(/image\/.*/)) {
      $properties_btn.attr('disabled', true);

      var reader = new FileReader();

      reader.onload = function() {
        var $img = $('<img />').attr({
          src: reader.result
        });

        $img.on('load', function() {
          $imgContainer.append($img).show();

          $pageImg.data('imageSize', {
            width:...