Dynamic Table CUSTOM FIELD WP back & front end

Hi,

I want to create a custom field in WordPress that will allow me to create a table with an undefined number of rows. The number of columns will always be five. Example:

<table>
	<tr>
		<th>Unit Name</th>
	  	<th>Number of Beds</th>
	  	<th>Size M2</th>
	  	<th>Price from</th>
	  	<th>Price to</th>
	</tr>
	<tr>
		<td>dynamic content</td>
		<td>dynamic content</td>
		<td>dynamic content</td>
		<td>dynamic content</td>
		<td>dynamic content</td>
	</tr>
</table>

The requirements are:

1) Must be able to add new rows dynamically in backend by clicking a “+” button.
2) Must be able to save data in rows
3) Must output to the front end in the proper styling.

I have created custom fields similar to this one, but they had fixed amounts of data. I know how to the basics but I don’t know what to do to create these dynamic tables. My PHP is limited, I’m quite a newbie, but I understand blocks of code when I see them, just don’t write them from scratch very well.

Here is the code I wrote to output one static table row.

<?php
/********************************************************************/
/* UNITS CUSTOM FIELDS */
/*********************************************************************/
add_action( 'admin_init', 'unit_type_admin' );

function unit_type_admin() {
	add_meta_box(
		'unit_type_meta_box',
		'Unit Type',
		'display_unit_type_meta_box',
		'post',
		'normal',
		'high'
	);
}

function display_unit_type_meta_box( $unit_type ) {
	$unit_name = esc_html( get_post_meta( $unit_type->ID, 'unit_name', true) );
	$num_beds = esc_html( get_post_meta( $unit_type->ID, 'num_beds', true) );
	$size = esc_html( get_post_meta( $unit_type->ID, 'size', true) );
	$price_from = esc_html( get_post_meta( $unit_type->ID, 'price_from', true) );
	$price_to = esc_html( get_post_meta( $unit_type->ID, 'price_to', true) );

	?>
		<label for="unit_name_text">Unit Name: </label>
		<input type="text" id="unit_name_text" name="unit_name_text" value="<?php echo $unit_name; ?>" /><br />

		<label for="num_beds_text">Number of Beds: </label>
		<input type="text" id="num_beds_text" name="num_beds_text" value="<?php echo $num_beds; ?>" /><br />

		<label for="size_text">Size M2: </label>
		<input type="text" id="size_text" name="size_text" value="<?php echo $size; ?>" /><br />

		<label for="price_from_text">Price From (THB): </label>
		<input type="text" id="price_from_text" name="price_from_text" value="<?php echo $price_from; ?>" /><br />

		<label for="price_to_text">Price To (THB): </label>
		<input type="text" id="price_to_text" name="price_to_text" value="<?php echo $price_to; ?>" /><br />

		<hr />

<?php

	}

add_action( 'save_post', 'unit_type_fields', 10, 2 );

function unit_type_fields( $unit_type_id, $unit_type) {
	if ( $unit_type->post_type == 'post') {
		if ( isset( $_POST['unit_name_text'] ) && $_POST['unit_name_text'] != '' ) {
			update_post_meta( $unit_type_id, 'unit_name', $_POST['unit_name_text'] );
		}
		if ( isset( $_POST['num_beds_text'] ) && $_POST['num_beds_text'] != '' ) {
			update_post_meta( $unit_type_id, 'num_beds', $_POST['num_beds_text'] );
		}
		if ( isset( $_POST['size_text'] ) && $_POST['size_text'] != '' ) {
			update_post_meta( $unit_type_id, 'size', $_POST['size_text'] );
		}
		if ( isset( $_POST['price_from_text'] ) && $_POST['price_from_text'] != '' ) {
			update_post_meta( $unit_type_id, 'price_from', $_POST['price_from_text'] );
		}
		if ( isset( $_POST['price_to_text'] ) && $_POST['price_to_text'] != '' ) {
			update_post_meta( $unit_type_id, 'price_to', $_POST['price_to_text'] );
		}
			}
}

function display_unit_type() {
	global $post;

	$unit_name = get_post_meta( $post->ID, 'unit_name', true );
	$num_beds = get_post_meta( $post->ID, 'num_beds', true );
	$size = get_post_meta( $post->ID, 'size', true );
	$price_from = get_post_meta( $post->ID, 'price_from', true );
	$price_to = get_post_meta( $post->ID, 'price_to', true );

	$allowed_html = array(
	'a' => array(
		'href' => array(),
		'title' => array()
		),
	'em' => array(),
	'strong' => array()
	);

	$_unit_name_output = wp_kses( $unit_name, $allowed_html );
	$_num_beds_output = wp_kses( $num_beds, $allowed_html );
	$_size_output = wp_kses( $size, $allowed_html );
	$_price_from_output = wp_kses( $price_from, $allowed_html );
	$_price_to_output = wp_kses( $price_to, $allowed_html );

		$output = '<div class="col-md-12">
					<div class="table-responsive">
						<table class="table table-bordered table-striped">
							<tr>
								<th>Unit Name</th>
							  	<th>Number of Beds</th>
							  	<th>Size M2</th>
							  	<th>Price from THB</th>
							  	<th>Price up to THB</th>
							</tr>
							<tr>
								<td>'.$_unit_name_output.'</td>
								<td>'.$_num_beds_output.'</td>
								<td>'.$_size_output.'</td>
								<td>'.$_price_from_output.'</td>
								<td>'.$_price_to_output.'</td>
							</tr>
						</table>
					</div>
				</div>';

		if($_unit_name_output != '') {
			return $output;
	}
}
add_shortcode( 'project-info-box', 'display_unit_type' );
?>

How could I add to or change this to allow dynamic rows. I am looking into arrays and I think that seems to hold some promise, but I don’t know how to implement it.

Any help greatly appreciated!