I need to replace the textarea content from the HTML table row when preview clicked and show the preview as per the table data. Moreover the HTML data does not remain consistent with same header values as its dynamically changes as per the user interactions/uploads. 

Users enter the content in a textarea box as follow:

```
<textarea name="message">Hello {FIRST NAME) {LAST NAME}, please pay {AMOUNT} by the end of this month.</textarea>

```

I tried with the following code:

```
$(document).on("click", ".previewCustom", function (t) {
        t.preventDefault();
        var msg = $("textarea[name=message]").val();
        $("tr.table").click(function () {
            var tableData = $(this).children("td").map(function () {
                return $(this).text();
            }).get();

            console.log(tableData)
        });
    });

```

HTML table Code:

```
    <table id="previewTableId" class="table table-bordered">
    <tbody>
        <tr>
            <th class="text-center" id="A">First Name</th>
            <th class="text-center" id="B">Last Name</th>
            <th class="text-center" id="C">Amount</th>
            <th class="text-center" id="D">Preview</th>
        </tr>
        <tr>
            <td class="text-center First_Name">Joe</td>
            <td class="text-center Last_Name">Sam</td>
            <td class="text-center Amount">1000</td>
            <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td>
        </tr>
        <tr>
            <td class="text-center First_Name">Sam</td>
            <td class="text-center Last_Name">Joe</td>
            <td class="text-center Amount">5000</td>
            <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td>
        </tr>
        <tr>
            <td class="text-center First_Name">aaa</td>
            <td class="text-center Last_Name">bbbb</td>
            <td class="text-center Amount">3000</td>
            <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td>
        </tr>
    </tbody>
</table>

```

I am expecting to show the final result by replacing table cell values based on the textarea content with HTML table row data in a modal of the specific table row after clicking on **preview** button as

**Hello Joe Sam, please pay 1000 by the end of this month.**

Please note as header of the table data may vary user to user so can't use fix class names or attributes.