<style>
   tbody#orderTableBody>tr>td {
        padding: 0px !important;
    }
</style>
<!-- <div class="row">
    <div class="col-sm-12">
        <div class="alert alert-info alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4><i class="icon fa fa-info-circle"></i> Note:</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit libero a metus condimentum commodo. Donec id lorem sit amet turpis ultricies varius ac eu tortor.</p>
        </div>
    </div>
</div> -->
<div class="row">
    <div class="col-sm-12">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" value="1" id="orderCounterValue" name="orderCounterValue" />
        <table class="table" id="tableRow" style="font-size:12px;">
            <thead>
                <tr>
                    <!-- <th>#</th> -->
                    <th class="col-md-4">Name</th>
                    <th class="col-md-2">Number</th>
                    <th class="col-md-3">Jersey Size</th>
                    <th class="col-md-3">Shorts Size</th>
                    <th class="text-center"></th>
                </tr>
            </thead>
            <tbody id="orderTableBody">
                <tr class="table-tr-1">
                    <td>
                        <input type="text" name="order_names[]" id="order_names" class="form-control input-sm inputName roster-input" placeholder="Name" required>
                    </td>
                    <td>
                        <!-- <input type="text" name="order_numbers[]" id="order_numbers" class="form-control input-sm inputName" placeholder="Number"> -->
                        <select class="form-control input-sm roster-input" name="order_number[]" id="order_number">
                            <option value="null">none</option>
                            @for($i = 0; $i <= 99; $i++)
                                <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                            <option value="00">00</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-control input-sm order-size roster-input" name="order_jersey_size[]" id="order_jersey_size_1" data-row-number="1">
                            <option value="none">none</option>
                            @foreach($jersey_sizes as $j_size)
                                <option value="{{ $j_size }}">{{ $j_size }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td style="border-right: 1px solid #ddd;">
                        <select class="form-control input-sm order-size roster-input" name="order_shorts_size[]" id="order_shorts_size_1" data-row-number="1">
                            <option value="none">none</option>
                            @foreach($shorts_sizes as $s_size)
                                <option value="{{ $s_size }}">{{ $s_size }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td id="action-column" class="text-center" style="padding: 4px !important; border-top: none">
                        <span class="tr-remove-btn">
                            <button type="button" id="addNewRow" class="btn btn-success btn-sm btn-roster-action" data-toggle="tooltip" title="Add Another"><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </span>
                    </td>
                </tr>
               
            </tbody>
        </table>
    </div>
</div>