JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<form id='orderform' class='cmxform' method='POST' action='testea.html'>
    <fieldset>
        <legend>Relação dos Hidrômetros</legend>
        <ul id='hds'>
            <li class='campoHd'>
                <label class='type'>Tipo do HD:
                <select size=1 name='item-tipo-{0}'>
                        <option value='1'>Indicador</option>
                        <option value='2'>Remessa Especial</option>
                        <option value='3'>Outros</option>
                    </select>
                </label>
                <label class='type'>Obra:
                <select size=1 name='item-obra-{0}'>
                        <option value='905'>905 - Manutenção</option>
                        <option value='909'>909 - Ligações/Religações</option>
                    </select>
                </label>
                <label class='quantity'>Qtd:
                <input maxlength=7 size=7 class='quantity' min='1' id='item-quantity-{0}' name='item-quantity-{0}' />
                </label>
                <a href='#' class='removerCampo'>Remover</a>

            <li><a href='#' class='adicionarCampo'>Adicionar Relação</a></td></tr>
        </ul>
    </fieldset>
    <input class='submit' type='submit' value='Submit'/>
</form>

JavaScript

// teste de submit
$.validator.setDefaults({
    submitHandler: function() {
        alert("enviado!");
    }
});
$.validator.messages.min = jQuery.format('Deve conter somente números!');

$.validator.addMethod('quantity', function(value, element) {
    return !this.optional(element);
}, 'Informe a quantidade de HDs');

$().ready(function() {
    $('#orderform').validate({
        errorPlacement: function(error, element) {
            error.appendTo(element.parent().next() );
        }
    });
    
        $(function(){
            function removeCampo() {
                
                $('.removerCampo').unbind('click');
                $('.removerCampo').bind('click', function () {
                    i=0;
                    $('#hds li.campoHd').each(function () {
                        i++;
                    });
                    if (i>1) {
                        $(this).parent().remove();
                    }
                });
            }
        
            $('.adicionarCampo').click(function () {
                novoCampo = $('#hds li.campoHd:first').clone();
                i=0;
                $('#hds li.campoHd').each(function () {
                    i++;
                });
                novoCampo.find('input').val('').attr('id', 'id'+i);
                novoCampo.insertAfter('#hds li.campoHd:last');
                //novoCampo.find('input:first').focus(); 
                removeCampo();
            });
        });        
    
});