JSFiddle - React, Tailwind, and code Playground

by PeteUh

HTML

<div id="meta_inner" class="gallery">
    <div id="medias">
        <label for="test_meta_boxes1">
            <input id="test_meta_boxes1" type="text" size="100" name="ad_image" value="http://"
            />
            <input id="test_meta_boxes_button" class="button" type="button" value="Upload Image"
            data-int="test_meta_boxes1" />
        </label>
    </div>
    <input class="button tagadd add" type="button" value="Add Image Field" />
</div>

JavaScript

var count = $("#medias").children('label').length;
$(".tagadd").click(function () {
    count++;
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>');
    $('#test_meta_boxes' + count).after(
        $("<input />")
            .attr('id', "test_meta_boxes_button")
            .attr('type', 'button')
            .attr('value', 'Upload Image')
            .attr('data-int', 'test_meta_boxes' + count)
            .addClass('button')
            .click(function (e) {
                metabox = $(this).data('int');
                console.log(metabox);
            })
    );
    return false;
});

$('label').find('#test_meta_boxes_button').on('click', function (e) {

    metabox = $(this).data('int');

    console.log(metabox);

});