Showing selected rows in a new table

emre83

I have two tables in a page:

Name	Customer Name	Licence Key
A1	John	XXX-YYY
A2	Jack	ABC-DEF
A3	Jane	XYZ-ABC

My code for this table:

<script>
    $(document).ready(function () {
        var farmdata = $('#farmsGrid').DataTable({
            "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
            "ajax": {
                "url": "/Settings/LoadFarmData",
                "type": "GET",
                "datatype": "json",
                "dataSrc": "Result"
            },
            "columns": [
                    { "data": "Name" },
                    { "data": "CustomerName" },
                    { "data": "LicenseKey" },
            ]
        });
        $('#farmsGrid tbody').on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
    });
</script>

And Second table is:

Table Name
Device X
Device Y
Device Z

My code for the second table is:

<script>
    $(document).ready(function () {
        var tabledata = $('#tablesGrid').DataTable({
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "ajax": {
                "url": "/Settings/LoadTableData",
                "type": "GET",
                "datatype": "json",
                "dataSrc": "Result"
            },
            "columns": [
                    { "data": "Name", "autoWidth": true },
            ]
        });
        $('#tablesGrid tbody').on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
    });
</script>

And I have three buttons:

<button type="button" class="btn-success btn">Enable Trigger</button> 
<button type="button" class="btn-danger btn">Disable Trigger</button> 
<button type="button" class="btn-info btn">Initialize</button> 

You can select multiple rows in each tables.
When I select a row from first table and select two rows from the second table and click to Enable Trigger button, I want to create a third table on that page that shows something like this:

Customer Name	Table Name	Button
Jane	Device Y	Trigger enabled
Jane	Device Z	Trigger enabled

As you see, Customer Name is coming from the first table (Selected Jane row), Table Name is coming from the second table (Device Y and Device Z rows are selected) and Button value is comming from the Enable Trigger button because table created after I click that button.

When two different customers select from first table and three different devices select from the second and click to Disable Trigger button;

Customer Name	Table Name	Button
Jane	Device X	Trigger disabled
Jane	Device Y	Trigger disabled
Jane	Device Z	Trigger disabled
Jack	Device X	Trigger disabled
Jack	Device Y	Trigger disabled
Jack	Device Z	Trigger disabled

this table will going to be created.
I am not a javascript pro so it gets a bit complicated for me at this point.
Thanks for your help!