JSFiddle - React, Tailwind, and code Playground

by Zacc206

HTML

<div class="row">
    <div class='col-sm-4'>
        <button class="btn btn-default" id="btn-left">Move Col 1 Left</button>
    </div>
    <div class='col-sm-4 text-center'>
        <button class="btn btn-default" id="btn-get">Get index of Col 1</button>
    </div>
    <div class='col-sm-4 text-right'>
        <button class="btn btn-default" id="btn-right">Move Col 1 Right</button>
    </div>
</div>

<br />
<br />

<table class='table'>
    <tr>
        <td class="columns col1">Column 1</td>
        <td class="columns col2">Column 2</td>
        <td class="columns col3">Column 3</td>
        <td class="columns col4">Column 4</td>
    </tr>
    <tr>
        <td class="columns col1">Column 1</td>
        <td class="columns col2">Column 2</td>
        <td class="columns col3">Column 3</td>
        <td class="columns col4">Column 4</td>
    </tr>
</table>
<table class='table'>
    <tr>
        <td class="columns col1">Column 1</td>
        <td class="columns col2">Column 2</td>
        <td class="columns col3">Column 3</td>
        <td class="columns col4">Column 4</td>
    </tr>
    <tr>
        <td class="columns col1">Column 1</td>
        <td class="columns col2">Column 2</td>
        <td class="columns col3">Column 3</td>
        <td class="columns col4">Column 4</td>
    </tr>
</table>
<table class='table'>
    <tr>
        <td class="columns col1">Column 1</td>
        <td class="columns col2">Column 2</td>
        <td class="columns col3">Column 3</td>
        <td class="columns col4">Column 4</td>
    </tr>
    <tr>
        <td class="columns col1">Column 1</td>
        <td class="columns col2">Column 2</td>
        <td class="columns col3">Column 3</td>
        <td class="columns col4">Column 4</td>
    </tr>
</table>

CSS

body{padding: 20px;}
table{border: 1px solid #e3e3e3;}

JavaScript

$(document).ready(function(){
    alert('Doc loaded!');
    
    $('#btn-get').click(function(){        
        $('tr').each(function(){
            
            
            var arrayOfRowChildren = null;
            var lengthOfArray = null;
            var currentColIndex = 0;
            var currentColIndex2 = 0;
            
            arrayOfRowChildren = $(this).children('.columns');
            
            lengthOfArray = arrayOfRowChildren.length;
            
            //currentColIndex = arrayOfRowChildren.index('.col1');

            for(i = 0; i < arrayOfRowChildren.length; i ++){
                //if(arrayOfRowChildren[i].hasClass('.col1'))
                //{
                    //currentColIndex = i;
                //}
                alert(i);
            }
            
            currentColIndex2 = $('.col1').index(arrayOfRowChildren);
            
            alert("Length of Array: " + lengthOfArray + "\n\n" + "Col 1 Index: " + currentColIndex);
        });
    });
});