JSFiddle - React, Tailwind, and code Playground

by David_IB

HTML

<table>
    <tr>
        <td>Title</td>
        <td>Preacher</td>
        <td>Passage</td>
    </tr>
    <tr>
        <td>Creation</td>
        <td>Adam</td>
        <td><a href="#" class="STEP" URL="reference=Gen.1">Gen.1</a>
        </td>
    </tr>
    <tr>
        <td>Re-Creation</td>
        <td>John</td>
        <td><a href="#" class="STEP" URL="reference=Rev.21.4-Rev.21.15">Revelation 21:4-15</a>
        </td>
    </tr>

        <tr>
        <td>God's love for sinners</td>
        <td>Zephaniah</td>
        <td><a href="#" class="STEP" URL="version=ESV|reference=Zeph.3.17|version=NIV&options=HVGUN&display=COLUMN_COMPARE">Zephaniah 3:17 in the ESV and NIV</a>
        </td>
    </tr>
    
        <tr>
        <td>A study of love and loyalty</td>
        <td>Pastor L</td>
        <td><a href="#" class="STEP" URL="version=ESV|strong=H2617a">Kindness and loyalty in the Bible</a>
        </td>
    </tr>
    
</table>
<br />

<div class="STEP-Box"><i>STEP references can be almost in any format.</i></div>

CSS

td {
    border: solid thin black;    
    margin: 0px
         
}

table {
  border-collapse: collapse;
    padding: 0px
}

JavaScript

$('a.STEP').click(function () {
    var id = $(this).attr('URL');
    var src = 'http://www.stepbible.org/?q='+id;
    var iframe = '<iframe id="youtube" width="560" height="315" frameborder="0" src="'+src+'" allowfullscreen></iframe>';
    $(".STEP-Box").html(iframe);
    return false;
});