JSFiddle - React, Tailwind, and code Playground
HTML
<HTML>
<body>
<div id="formdiv">
<form accept-charset="UTF-8" action="#" class="address_form" id="address_form_id_45" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="put" />
<input name="authenticity_token" type="hidden" value="somerandomvalue" />
</div>
<div id='fields_group'>
<div class='field_group' id='name_fields'>
<div class='field first_name_field'>
<label for="address_entry_first_name">First Name: </label>
<input id="address_entry_first_name" name="address_entry_first_name" size="30" type="text" value="Dr. Burdette" placeholder="First Name" />
</div>
<div class='field last_name_field'>
<label for="address_entry_last">Last Name: </label>
<input id="address_entry_last_name" name="address_entry_last_name" size="30" type="text" value="Dickinson" placeholder="Last Name" />
</div>
</div>
<div class='field_group' id='address_fields'>
<div class='field address_field' id='address_field_one'>
<label for="address_entry_address">Address: </label>
<input id="address_entry_address_one" name="address_entry_address_one" size="30" type="text" value="567 Cassin Plains" placeholder="Street Address" />
<div class='address_line_button_box'>
<a href="#" class="address_line_button" id="add_address_line" title="Add additional address field"></a>
</div>
</div>
<div...
CSS
html, body {
margin: 0;
padding: 0;
background: #E0E0E0;
}
#formdiv {
margin: 10px auto 0;
width: 450px;
height: 500px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 0;
padding-left: 50px;
border: 1px solid #000;
background: #EEF;
}
.field {
margin-top: 10px;
clear: both;
}
#formdiv label {
float: left;
text-align: center;
}
#formdiv input {
float: right;
}
#actions {
clear: both;
margin-top: 50px;
}
JavaScript
$(function() {
$.widget("ui.formify", {
_init:function(){
var form = this.element;
var inputs = form.find("input, select, textarea");
form.addClass('ui-widget');
$.each(inputs, function() {
$(this).addClass('ui-state-default ui-corner-all');
});
}
});
$('a.address_line_button#add_address_line').bind('click', function(event) {
event.preventDefault();
$('#address_field_two').fadeIn(); //removeClass('ui-helper-hidden');
$('a.address_line_button#add_address_line').button('option', 'disabled', true);
}).button({
icons: {
primary:'ui-icon-plus'
},
disabled: true,
text: false
});
$('a.address_line_button#remove_address_line').bind('click', function(event) {
event.preventDefault();
$('#address_field_two').fadeOut(300); //addClass('ui-helper-hidden');
$('input#address_entry_address_two').val("");
$('a.address_line_button#add_address_line').button('option', 'disabled', false);
}).button({
icons: {
primary: 'ui-icon-minus'
},
disabled: false,
text: false
});
if ($('#address_field_two').is(':hidden')) {
$('a.address_line_button#add_address_line').button('option', 'disabled', false);
};
// Bug with enabling/disabling the add_address_line button state
$('input#reset_button').bind('mouseup', function(event) {
var inp =...