JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<div class="container" style="width:80%">
    <div class="panel panel-default">
        <div class="panel-heading">Image ID
            <div class="btn-group btn-group-sm pull-right">
                <div class="btn btn-default submit-button">SUBMIT <span class="glyphicon glyphicon-plus"></span>
                </div>
                <div class="btn btn-danger remove-button">REMOVE <span class="glyphicon glyphicon-remove-circle"></span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

.panel-heading {
    overflow: hidden;
    padding-top: 20px;
}
.btn-group {
    position: relative;
    top: -5px;
}

JavaScript

$(function () {
    $removeButton = $('<button class="btn btn-default remove">')
        .text('Remove ' + imageid.value).appendTo($(".remove-button"))
        .on('click', function () {
        panel.remove();
        $(this).remove();
        return false;
    });


    $submitButton = $('<button class="btn btn-default submit"></div>')
        .text('Submit ' + imageid.value).appendTo($(".submit-button"))
        .on('click', function () {
        var saveImage = encodeURIComponent(dataUrl);
        jQuery.ajax({
            type: "PUT",
            url: 'url.com' + imageid.value + "/" + saveImage,
            //data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var jsonObj = jQuery.parseJSON(data);
                alert(jsonObj);
            },
            failure: function (errorMsg) {
                alert(errorMsg);
            }
        });
    });
});
});
});