How to append custom metabox fields with jQuery in post

Question

I am trying to add custom meta box in post programmatically, but js gives an error,the goal is when I click add button,the same text area box is append which was created previously. My code for crating custom metabox in function.php file in twenty seventeen theme is:

// including custom js files here
function wptuts_scripts_with_jquery() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/myjs.js', array( 'jquery' ));
}
add_action( 'admin_enqueue_scripts', 'wptuts_scripts_with_jquery' );

// starting custom meta box
add_action( 'add_meta_boxes', 'm_param_meta_box_add' );
function m_param_meta_box_add() {
    add_meta_box( 'm_param_post', 'Box Title', 'm_param_post_meta_box_cb', 'post', 'normal', 'high' );
}

function m_param_post_meta_box_cb( $post )
{
    $values = get_post_custom( $post->ID );
    if ( isset( $values['m_meta_description'] ) ) {
        $m_meta_description_text = esc_attr( $values['m_meta_description'][0] );
    }
    wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );

?>

<div id="info"></div>
    <label> Name: </label>
    <textarea rows="1" cols="20" name="m_meta_description" ><?php echo $m_meta_description_text; ?></textarea>

    <button type="button" name="add" id="add">Add</button><br><br>

<?php
} // close m_param_post_meta_box_cb function

add_action( 'save_post', 'cd_meta_box_save' );
function cd_meta_box_save( $post_id )
{
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;

    // Make sure your data is set before trying to save it
    if( isset( $_POST['m_meta_description'] ) ) {
        update_post_meta( $post_id, 'm_meta_description', wp_kses( $_POST['m_meta_description']) );
    }     
}

my js code error is:"Uncaught TypeError: $ is not a function at myjs.js:2"

my js code is:

// <script type="text/javascript">
        $(document).ready(
            function(){
                $("#add").click(function(){
                    $("#info").append('fname<input type="text" name="name[]">');
                })
            }
        );
    // </script>

Answer 1

Try using this:

    jQuery(document).ready(
        function(){
            jQuery("#add").click(function(){
                jQuery("#info").append('fname<input type="text" name="name[]">');
            })
        }
    );

According to this article, when WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries:

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead.

Answer 2

While this answer is correct, it's worth saying, that you can also do this

jQuery(document).ready(function ($)
{
    $("#add").click(function(){
        $("#info").append('fname<input type="text" name="name[]">');
    })
})

removing the need of writing jQuery everywhere instead of $

Answer 3

Even at the beginning, you could remove JQuery and place a "$"

$(document).ready(function ($)
{
    $("#add").click(function(){
        $("#info").append('fname<input type="text" name="name[]">');
    })
})