Show and hide div seamlessly on hover

Question

How can i hover over an item in a list of items and the hidden div belonging to that particular item will show when mouseover and disappear when mouseout? The current problem i have with this script is that only the first item fadein & out but when i hover over other items in the list, the first item is still the only target that fadein & out. pls help thanks in advance..

my script:

      <script type="text/javascript">

$(document).ready(function(){

    $(".title").hover(function(){
                $("#projdesc").fadeIn();
            }, function(){
               $("#projdesc").fadeOut();
            });

    });

         </script>

my html:

                    {% for job in job_list %}
                    {% if job.is_active %}
                    <tr class="{% if forloop.counter|divisibleby:2 %}oddRow{% else %}evenRow{% endif %}">
                        <td width="40%">
                        <a href="{{ job.get_absolute_url }}">
                            <div class="title">
                                {{ job.title }} 
                            </div>
                        </a>
                        <div id="projdesc" class="proj_desc">
                            {{ job.description|truncatewords:28 }}
                        </div>
                        <td width="11%" valign="top">
                            <div class="posted_by">
                                {{ job.job_creator.nickname }}
                            </div>
                        </td>
                        <td width="17%" valign="top">
                            <div class="proj_cat">
                                {{ job.skill.name }}
                            </div>
                        </td>
                        <td width="8%" valign="top">
                            <div class="weekly_rate">
                                {{ job.budget|floatformat:0 }}
                            </div>
                            <td width="10%" valign="top">
                                <div class="proj_pDate">
                                    {{ job.created_at|date:"j/m/Y" }}
                                </div>
                            </td>
                            <td width="7%" valign="top">
                                <div class="proj_LDate">
                                    {{ job.get_bid_time_left }}
                                </div>
                            </td>
                            <td width="7%" valign="top">
                                <div class="bids">
                                    {{ job.get_no_of_bids }}
                                </div>
                            </td>
                        </td>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </tr>

Answer 1

You cant's have more than one element with the same id on a page. You need to make it a class. And to show the item belonging to this particalar element that you are hovering you need to do it like this

    $(".title").hover(function(){
            $(this).closest("tr").find(".projdesc").fadeIn();
        }, function(){
           $(this).closest("tr").find(".projdesc").fadeOut();
        });

});

Answer 2

You need to find the description in a relative way. Here's one option:

$('.title').hover(function(){
    $(this).closest('tr').find('.proj_desc').fadeIn();
}, function(){
    $(this).closest('tr').find('.proj_desc').fadeOut();
});

Also, as a side note, your HTML does not appear to be valid. That probably is not causing this problem, but it will need to be fixed before this solution will work . In particular, your first td does not have a closing tag before the next td , you have nested td tags, there appears to be a stray </div> tag just before the </tr> , and your endif and endfor should be outside of the tr .