JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<div id="bidHistoryData" class="table-responsive">
    <table class="table table-striped b-t b-light text-sm" style="">
        <thead>
            <tr>
                <th>ID</th>
                <th>Car ID</th>
                <th>Date</th>
                <th>Make</th>
                <th>Model</th>
                <th>Image</th>
                <th>Current Bid</th>
                <th>Max Bid</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- Start loop -->{{ car:getNewCarsForStaffBidHistory }}
            <tr>
                <td>{{id}}</td>
                <td>{{ car_id }}</td>
                <td>{{ created }}</td>
                <td>{{ car_brand_title }}</td>
                <td>{{ car_model_title }}</td>
                <td>
                    <img class="" alt="{{ car_brand_title }} {{ car_model_title }}" data-original="{{car:getAvatarByID id='{{car_avatar}}' }}" src="{{car:getAvatarByID id='{{car_avatar}}' }}" width="90px" height="67px">
                </td>
                <td>{{ car_current_bid }}</td>
                <td>{{ max_bid }}</td>
                <td> <a data-toggle="modal" id="show-bidders-{{car_bid_car_id}}" data-bidders-id="{{car_bid_car_id}}" data-target="#bidModal" href="#" class="btn btn-sm btn-info bid-show">Show bids <span class="badge badge-white">{{ TotalBid }}</span></a>

                </td>
            </tr>{{ /car:getNewCarsForStaffBidHistory }}
            <!-- endloop -->
        </tbody>
    </table>
    <!--Modals-->
    <div class="modal fade" id="bidModal" tabindex="-1" role="dialog" aria-labelledby="Bids Information" aria-hidden="true" data-toggle="carModal" style="z-index: 9999;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title">All...

JavaScript

var $show_links = $('.bid-show'),
    $modal = $('#bidModal'),
    $tbody = $modal.find('.bid-table table tbody');

function updateModalTable(car_id) {
    $tbody.find('tr').remove();
    $.get("http://url" + car_id, function (data) {
        $.each(data, function (i, val) {
            $tbody.append(BidRowRender(val));
        });
    });
}

$show_links.each(function (k, link) {
    var car_id = $(link).data('bidders-id');
    $modal.on("show.bs.modal", function (e) {
        updateModalTable(car_id);
    });
});