JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
<html>
<head>
  <style></style>
  <script src="jquery-1.4.2.js"></script>
  <script src="jquery.validate.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        var i = 1;
    
        var template = $.format($("#template").html());
        function addRow() {
            $(template(i++)).appendTo("#machineList");
        }
        
        function checkMachineIDs(element){
            if($(element).val() != ""){
                var arrElements = $(".machineID");
                var $element = $(element);
                
                if(arrElements.size() > 1){
                    var iCtr = 0;
                    $.each(arrElements, function(index, value){
                        if($element.val() == value.val()){
                            iCtr++;
                        }
                    });
                    if(iCtr > 1){
                        return false;
                    }else{
                        return true;
                    }
                }else{
                    return true;
                }
            }else{
                return true;
            }
        }
        
        $.validator.addMethod("uniqueMachineID", function(value, element) {
            return !this.optional(element) && checkMachineIDs(element);
        }
        , "Please input Machine ID and make sure that its not duplicate with the others!");
        
        // start with one row
        addRow();
        
        $.validator.setDefaults({
            submitHandler: function() {
                alert("submitted!");
            }
        });
        $("#machineForm").validate();
        
        $("#addButton").click(function(){
            addRow();
        });
    });
  </script>
</head>
<body>
    
    <div id="template" style="display: none">
        <div><label>Equipment ID {0}</label><input type="text"...