JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css">
<h1>Hover Each Element To View Attributes</h1>
<hr />

<button>Click Here To Copy Attributes from Source to Destination</button>


<div class="layout destinationElement" data-id="0" data-layout="rating">
			
	<input name="acf[field_5a90066d8e215][0][acf_fc_layout]" value="rating" type="hidden">
	
	<div class="acf-fc-layout-handle" title="Drag to reorder" data-name="collapse-layout"><span class="acf-fc-layout-order">1</span> Rating</div>
	
	<div class="acf-fc-layout-controlls">
		<a class="acf-icon -plus small light acf-js-tooltip" href="#" data-name="add-layout" title="Add layout"></a>
		<a class="acf-icon -minus small light acf-js-tooltip" href="#" data-name="remove-layout" title="Remove layout"></a>
		<a class="acf-icon -collapse small acf-js-tooltip" href="#" data-name="collapse-layout" title="Click to toggle"></a>
	</div>
	
	
		<div class="acf-fields ">
		
		<div class="acf-field acf-field-repeater acf-field-5a900c16d4d1f" data-name="rating" data-type="repeater" data-key="field_5a900c16d4d1f">
	<div class="acf-label">
		<label for="acf-field_5a90066d8e215-0-field_5a900c16d4d1f">Rating</label>
	</div>
	<div class="acf-input">
		<div class="acf-repeater -table" data-min="0" data-max="0">
	<input name="acf[field_5a90066d8e215][0][field_5a900c16d4d1f]" value="" type="hidden">
<table class="acf-table">
	
			<thead>
			<tr>
									<th class="acf-row-handle"></th>
								
									<th class="acf-th" data-name="title" data-type="text" data-key="field_5a900c83d4d20" style="width: 50%;">
						Title											</th>
									<th class="acf-th" data-name="level" data-type="number" data-key="field_5a900c97d4d21" style="width: 50%;">
						level											</th>
				
									<th class="acf-row-handle"></th>
							</tr>
		</thead>
		
	<tbody>
					<tr class="acf-row"...

CSS

p:hover {
    background: #f1e1e1;
    border-top: 1px solid #d0d0d0;
}

p, button{
    padding:20px;
    margin:20px;
}

.modified{
    color: red;
}321

JavaScript

(function ($) {
    // Define the function here
    $.fn.copyAllAttributes = function (sourceElement) {
        // 'that' contains a pointer to the destination element
        var that = this;

        // Place holder for all attributes
        var allAttributes = ($(sourceElement) && $(sourceElement).length > 0) ?
            $(sourceElement).prop("attributes") : null;

        if (allAttributes && $(that) && $(that).length == 1) {
            $.each(allAttributes, function () {
                // Ensure that class names are not copied but rather added
                if(this.name == "class"){
                    $(that).addClass(this.value);
                } else {
                    that.attr(this.name, this.value);
                }
                
            });
        }

        return that;
    };
})(jQuery);

$(function(){  
    /// **** USAGE *****
    $("button").click(function (){
        $(".destinationElement").copyAllAttributes($(".sourceElement"));
        $(".destinationElement").addClass("modified");
    });
    /// **** USAGE *****

    // Helper Function To View Available Attributes
    $("p").mouseover(function (e) {
        // Element
        var element = $(e.target);

        // Get All Attributes
        var allAttributes = $(element).prop("attributes");

        // For each attribute collect KVP's
        var kvpString = "";
        $.each(allAttributes, function (iindex, ielement) {
            kvpString += ("[" + iindex + "]: " + this.name + " : " + this.value  + " <br />");
        });

        // Display Kvp
        toastr.success(kvpString, "Highlighted Element's Attributes/Values");
    });
});