JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<table id="table-1" data-car-id="v1">
        <tr>
            <td>Header1</td>
        </tr>
        <tr>
            <td>Content1
                <input type="text" name="car[v1][marked][12]" />
            </td>
        </tr>
        <tr>
            <td>Footer</td>
        </tr>
    </table>
    <button id="copy-2" data-car-id="v2">Copy Table</button>
    <table id="table-2"></table>
    <button id="copy-3" data-car-id="v3">Copy Table</button>
    <table id="table-3"></table>

JavaScript

$(function () {
        $("button[id^='copy']").on('click', function () {
            var $prevCarId = $(this).prev("table[id^='table-']").attr('data-car-id')
            var $carId = $(this).attr('data-car-id');
            alert($prevCarId + ' => ' + $carId);
            var $prevTable = $(this).prev("table[id^='table-']").prop('innerHTML');
            $prevTable = $prevTable.replace($prevCarId, $carId);
            var $nextTable = $(this).next("table").html($prevTable);
        });
    });