How to loop over a elements that are members of a class to get data and turn that data into an object?

Question

I have an odd case where I need to loop with Javascript over HTML elements with class name ui-selected to grab the data associated with that class and insert the grabbed data into an object's attributes for further data manipulation. The whole goal of this ideally is so when some clicks on several different rows on a HTML table they can download the selected rows into a CSV file.

My train of thought was that I need to create an object with arrays as attributes and loop over my class name, get the data, insert the data into an array and then insert that array as an object's attribute. I hope this isn't a completely flawed way of thinking and makes sense. My issue is that I am not really sure on how to do this. I am familiar with looping over 2D arrays, but not something like this where it would require multiple looping if I understand correctly.

Here is what I have so far using jQuery, but I will probably try to opt out of jQuery:

$('#downloadBtn').click(function() {

    $('.ui-selected').each(function(index, value) {

            $(value).find('td').slice(0,2).each(function(i, v) {

                var tdText =  $(v).text();

                    if([0,1].indexOf(i) > -1) {
                        copyText += tdText + ',';
                        if([0,1].indexOf(i) == 1) {
                        copyText += '\n';
                        }
                    }

            });

        });
        console.log("CopyText : " + copyText)
});

Basically an easy way to think of what I am trying to accomplish is I need a functionality where I can select multiple rows within a HTML table, and when I click download it should grab only the "selected" rows and turn them into a CSV file to then be downloaded.

Here is basically what the table would look like in HTML (I am using the DataTable library from jQuery):

<table id="icpTable" class="cell-border " width="95%" align="center" style="margin-top: 20px;"> 
    <thead>
        <tr>
            <th>
                <strong>Customer Name</strong>
            </th>
            <th style="width: 20%">
                <strong>Tester Note</strong>
            </th>
            <th>
                <strong>Crucible No.</strong>
            </th>
            <th>
                <strong>Dry Weight</strong>
            </th>
            <th>
                <strong>Wet Weight</strong>
            </th>
            <th>
                <strong>Moisture</strong>
            </th>
            <th>
                <strong>Corrected WW</strong>
            </th>
            <th>
                <strong>Volume</strong>
            </th>
            <th>
                <strong>Dilution</strong>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>Example Customer Inc.</td>
           <td>SL-001-01-01</td>
           <td>123~01~01</td>
           <td>1.0000</td>
           <td>1.1233</td>
           <td></td>
           <td>1.012</td>
           <td>0.02</td>
           <td>0.0001</td>
        </tr>
        <tr>
           <td>Example Customer2 Inc.</td>
           <td>SL-002-01-01</td>
           <td>124~01~01</td>
           <td>1.0000</td>
           <td>1.1233</td>
           <td></td>
           <td>1.012</td>
           <td>0.02</td>
           <td>0.0001</td>
        </tr>
   </tbody>
</table>

I really only need tow columns from the table. Tester Note and Customer Name respectively. So the CSV would be something like this:

2018-18-10, 'Sample','Standard', 'test', (Customer Name),(Tester Note), 0.2,'','Tester','A1'

Edit:

I've been playing with this and this is what I have so far:

$('.ui-selected').each(function(index, value) {

    var row = table.insertRow(-1);

    $(value).find('td').each(function(i, v) {

        var tdText =  $(v).text();
            console.log(tdText)
    });
});

So this at least gets me the individual pieces of data. Now I just need to grab the first and second piece only and assign that to a variable.

Here is what I get in my console.log:

Example corp.
Example-066-1-S2
1~1~1
1.0003
1.0150

0.9993
100
100.0686

Answer 1

$('#downloadBtn').click(function() {
    let csv = "Customer Name, Tester Note\n";
    let elementarray = document.getElementsByClassName('ui-selected');

    for (i = 0; elementarray.length > i;i++) {
        var dataTags = elementarray[i].getElementsByTagName('td');
        var dataArr = [];
        dataArr.push(dataTags[0].innerText.trim());
        dataArr.push(dataTags[1].innerText.trim());
        csv += dataArr.join(', ') + "\n";
    }

    var a = document.createElement("a");
    a.href = "data:text/csv;charset=utf-8,"+ encodeURI(csv);
    a.download = "data.csv";
    a.click();
});

Here try this.

Here is the output i get.