JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" name="submit" id="step_1_form" method="post" accept-charset="UTF-8">
<div id="live-preview-form"><input name="company_name" class="input" placeholder="Firmenname" type="text" id="company_name"/></div>
<div id="live-preview-form" class="field"><input name="company_extra" placeholder="Zusatzzeile" type="text" id="company_extra"/></div>
<div id="live-preview-form" class="field"><input name="contact" 	placeholder="Kontaktperson" 	type="text" 		id="contact"/></div>
<div id="live-preview-form" class="field"><input name="mail" 		placeholder="E-Mail" 		type="text"		id="mail" /></div>
<div id="live-preview-form" class="field"><input name="phone" 		placeholder="Telefon" 		type="text" 		id="phone" /></div>
<div id="live-preview-form" class="field"> 	<input name="fax" placeholder="Fax" type="text" id="fax"  /></div>
<div id="live-preview-form" class="field">	<input name="adress" 	placeholder="Adresse" 		type="text" 		id="adress"   /></div>
<div id="live-preview-form" class="field">	<input name="zip" 		placeholder="PLZ" 			type="number" 	id="zip" /></div>
<div id="live-preview-form" class="field">	<input name="city" placeholder="Ort" type="text" id="city"  /></div>
														
<div id="live-preview-form" class="field">	<input name="url" placeholder="Homepage" type="text" id="url" /></div>
                
       		
       			<!-- Live Preview Kontaktperson-->
       				<div id="live-preview-Contact">
					<div id="lp-contact"></div>
					</div>
                </div>
       
       			<div class="w-47">
                <!-- Live Preview Adresse-->				
					<div id="live-preview-Adress">
 					<div id="lp-company_name"></div>
                    <div id="lp-company_extra"></div>
    				<div id="lp-adress"></div>
   					<div id="lp-country_code"></div>
    				<div id="lp-zip"></div>
    				<div id="lp-city"></div>
    				<div id="lp-phone"></div>
    				<div id="lp-fax"></div>
    				<div id="lp-url"></div>
   					<div id="lp-mail"></div>
				</div>
...

JavaScript

$(document).ready(function() {
  updatePreview();

  $('#live-preview-form input, #live-preview-form textarea #live-preview-form select').bind('blur keyup',updatePreview);
});

$(document).ready(function() {
  updatePreview();

  $('#live-preview-form input, #live-preview-form textarea #live-preview-form select').bind('blur keyup',updatePreview);
});

function updatePreview(){
  var 	contact 			= $('#lp-contact'),
  		company_name 	= $('#lp-company_name'),
		company_extra	= $('#lp-company_extra'),
     	adress 			= $('#lp-adress'),
      	zip 				= $('#lp-zip'),		
      	city 			= $('#lp-city'),		
      	phone 			= $('#lp-phone'),
      	fax 				= $('#lp-fax'),
      	url 				= $('#lp-url'),
      	mail 			= $('#lp-mail');
      
		
		contact.text($('#contact').val());
		company_name.text($('#company_name').val());
  		company_name.html($('#lp-company_name').html().replace(/\n/g,'<br />'));
		company_extra.text($('#company_extra').val());
		adress.text($('#adress').val());
		zip.text($('#zip').val());
		city.text($('#city').val());
		if(! $('#phone')){phone.text('T ' + $('#phone').val())};
		if(! $('#fax')){fax.text('F ' + $('#fax').val())};
		url.text($('#url').val());
		mail.text($('#mail').val());
}