Display the fields dynamically after clicking on add more fields button - php

Question

I added the custom fields in the WordPress admin panel I added a button called Add more fields so that users can add more than one. Now my issue is, I have to display fields dynamically by clicking on the Add more fields button.
I tried the below code but when I click on the Add more fields button then I am getting the browser warning and clicking on the leave button page then the page refreshed.
What is the issue with my code?
Full code here
function woocommerce_register_2col_layout_fields() {
global $post;
// Nonce field to validate form request came from current site
wp_nonce_field( basename( __FILE__ ), 'layout' );
// Output the field
echo '<button id="addMore_layout">Add more fields</button>';
echo '<div class="create_custom_layout" id="create_custom_layout"><div class="row">';
echo '<div class="col-md-6">';
echo '<h4>Description</h4>';
//We first get the post_meta from the DB if there's any there.
$description = get_post_meta( $post->ID, 'pDescription', true );
//Second ID the field.
$description_field = 'pDescription';
//Provide the settings arguments for this specific editor in an array
$description_args = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'pDescription[]',
'editor_class' => 'description-editor widefat', 'wpautop' => true );
wp_editor( $description, $description_field, $description_args );
echo '</div>';
echo '<div class="col-md-6">
<h4>Banner image</h4>
<input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
<input type="hidden" name="pimage[]" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'pimage', true ).'" /><br />
<img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'pimage', true ).'" />
</div>
</div>
</div>
<style>
.create_custom_layout .row{display: flex;flex-wrap: wrap;}
.create_custom_layout .col-md-6 {
flex: 0 0 auto;
width: 50%;
}
</style>
<script>
jQuery("#meta-image-button").click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment) {
jQuery("#meta-image").val(attachment.url);
jQuery("#meta-image-preview").attr("src",attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open();
return false;
});
jQuery(function() {
jQuery("#addMore_layout").click(function(e) {
e.preventDefault();
jQuery("#create_custom_layout").append("
<div class="row"><div class="col-md-6"><h4>Description</h4>';
//We first get the post_meta from the DB if there's any there.
$description = get_post_meta( $post->ID, 'pDescription', true );
//Second ID the field.
$description_field = 'pDescription';
//Provide the settings arguments for this specific editor in an array
$description_args = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'pDescription[]',
'editor_class' => 'description-editor widefat', 'wpautop' => true );
wp_editor( $description, $description_field, $description_args );
'</div>
<div class="col-md-6">
<h4>Banner image</h4>
<input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
<input type="hidden" name="pimage[]" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'pimage', true ).'" /><br />
<img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'pimage', true ).'" />
</div>
</div>
");
});
});
</script>';
}