Adding linking lines between two elements using css / jQuery

Question

I have created a wizard like UI(below screenshot). But I am not sure how to add a line linking point 1 to 2, highlighted withing the red box, when the user on the step 1 presses next and navigates to step 2. Is it possible using CSS / jQuery? I googled up but couldn't find anything on how to go about this. Any pointer on how to do this will also be helpful. Thanks!

 <table width="100%">

        <tr>
            <td align="center" width="20%">
                <div class="circleBase numberDiv1">
                    <font class="ft1">1</font>
                </div><br/>
                <div  id="myNewLink1" >
                    <font class="ft">step 1</font>
                </div>
            </td>
            <td align="center" width="20%">
                <div class="circleBase numberDiv2">
                    <font class="ft1">2</font>
                </div><br/>
                <div href="#" id="myNewLink2" >
                    <font class="ft">step 2</font>
                </div>
            </td>
            <td align="center" width="20%">
                <div class="circleBase numberDiv3">
                    <font class="ft1">3</font>
                </div><br/>
                <div href="#" id="myNewLink3" >
                    <font class="ft">step 3</font>
                </div>
            </td>
            <td align="center" width="20%">
                <div class="circleBase numberDiv4">
                    <font class="ft1">4</font>
                </div><br/>
                <div href="#" id="myNewLink4" >
                    <font class="ft">step 4</font>
                </div>
            </td>    
       </tr>
    </table>

Answer 1

here's a quick fiddle for you. You'll have to style it and tweak positioning and all that, but it should get you started.

http://jsfiddle.net/WtPQE/

css

.line-linkage {
    width: 92%;
    height: 0px;
    border: 1px solid #000;
    position: relative;
    top: -58px;
    left: 52%;
    z-index: -1000;
}

.hidden {
    visibility: hidden;
}

js

$('.line-linkage').addClass('hidden');

$('.ft').on( 'click', function () {
    $(this).parent().next('.line-linkage').toggleClass('hidden');
})