JSFiddle - React, Tailwind, and code Playground

by Kriti

HTML

<table name="my-ajax-table" id="newTable">
    <thead>
        <th>Artikelbezeichnung</th>
        <th>Verkaufspreis</th>
        <th>Bestellmenge</th>
    </thead>
    <tbody>
        <tr id="d1">
            <td class="drink_name">Cola</td>
            <td class="drinks_price">6.98</td>
            <td>
                <input type="text" class="order_amount" value="Order_Amount_1" name="colaamount">
            </td>
        </tr>
        <tr id="d2">
            <td class="drink_name">Fanta</td>
            <td class="drinks_price">6.98</td>
            <td>
                <input type="text" class="order_amount" value="Order_Amount_2" name="order_amount">
            </td>
        </tr>
    </tbody>
    <br/>
            
    <br/>
</table>
        <br>
        <div class="inner"><b>Data:</b> <br></div>

JavaScript

$(document).ready(function () {
    var arrOftd = [];
    //Iterate all td's 
    $('td').each(function () {
        var tableCol = $(this);
        //add item to array
        if (tableCol.hasClass("drink_name") || tableCol.hasClass("drinks_price")) {
            arrOftd.push(tableCol.text());
        } else if (tableCol.find("input").val() != undefined) {
            arrOftd.push(tableCol.find("input").val());
        }
        });

    //iterate unique array and build array of select options
    $.each(arrOftd, function (i, item) {
        console.log(item);
        $(".inner").append(item + ", ");
    })
    });