JSFiddle - React, Tailwind, and code Playground

by ramasaig

HTML

<fieldset>
	<ul id='addprops'>
	<ul class='extraPropertyTemplate'>
		<li id='prophdr'></li>
    		<ul class='input-block'>
				<li>
					<label>Address 1:<span class="rubric1"> *</span></label>
					<input class='newprop' id='addr7' name='addr7' placeholder='Address line 1' type='text' size="30" />
				</li>
				<li>
					<label>Address 2:</label>
					<input class='newprop' id='addr8' name='addr8' placeholder='Address line 2' type='text' size="30" />
				</li>
				<li>
					<label>Address 3:</label>
					<input class='newprop' id='addr9' name='addr9' placeholder='Address line 3' type='text' size="30" />
				</li>
				<li>
					<label>Town/Village:<span class="rubric1"> *</span></label>
					<input id='town' name='town' placeholder='Town or village' type="text" size="30" />
				</li>
				<li>
					<label>Post Code:</label>
					<input class='newprop' id='pc' name='pc' placeholder='Post Code' type='text' size="30" />
				</li>
			</ul>
		</ul>
		<li id='newprops'></li>
		<li id='addprop' class='tspace'>
			<label for="adpropcb">&nbsp;</label>
			<input type="checkbox" name="adpropcb" id="adpropcb" />
				Add another property
		</li>
	</ul>
</fieldset>

CSS

/* line 30, _meyer_reset.scss */
ol, ul {
  list-style: none;
}



/* line 77, _forms.scss */
.extraPropertyTemplate {
  display: none;
}

/* line 80, _forms.scss */
#prophdr {
  font-weight: bold;
}

JavaScript

$(document).ready(function() {
//		alert('doc ready called');
//		$('<ul/>', {
//			'class' : 'extraProperty', html: getHtml()
//		}).appendTo('#newprops'); //Get the HTML from Template
		$('#adpropcb').prop('checked', false);

		$('#adpropcb').click(function () {
			$('<ul/>', {
				'class' : 'extraProperty', html: getHtml()
			}).hide().appendTo('#newprops').slideDown('slow'); // Get the HTML from Template and hide
			$('#adpropcb').prop('checked', false);
		});
//		$("input[name='postcode']").val('PA75 6QX');
	})

	function getHtml() {
//		alert('getHtml called');
		var len = $('.extraProperty').length;	//	<ul> containing the property

//		alert('length is ' + len);
		var prop_no = len + 2;
		var $html = $('.extraPropertyTemplate').clone();

//		alert (prop_no + ': ' + pc_val);
//		lastprop.attr('id','prop' + len);
		$html.find('#prophdr').html('Property ' + prop_no);
		$html.find('[id=addr7]')[0].id='addprops'+prop_no+'addr1';
		$html.find('[id=addr8]')[0].id='addprops'+prop_no+'addr2';
		$html.find('[id=addr9]')[0].id='addprops'+prop_no+'addr3';
		$html.find('[id=town]')[0].id='addprops'+prop_no+'town';
		$html.find('[id=pc]')[0].id='pc'+prop_no;
		$("#pc2").val("PA75 6QX");

		$html.find('[name=addr7]')[0].name='addprops['+prop_no+'][addr1]';
		$html.find('[name=addr8]')[0].name='addprops['+prop_no+'][addr2]';
		$html.find('[name=addr9]')[0].name='addprops['+prop_no+'][addr3]';
		$html.find('[name=town]')[0].name='addprops['+prop_no+'][town]';
		$html.find('[name=pc]')[0].name='addprops['+prop_no+'][postcode]';
		var pcValue = $("#pc2").val();
		alert (prop_no +': '+pcValue);
		return $html.html();
	}