How to add tooltip by matching the IDs in HTML using Jquery
<p>I am using HTML and Jquery</p>

<p>I have got below issue, I have an below HTML code</p>

<pre><code>&lt;table style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
    border-bottom-style: solid" cellspacing="1" cellpadding="1" width="100%" border="1"&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; text-align: left; border-bottom-style: solid" align="left"&gt;
                &lt;strong&gt;Type of Course&lt;/strong&gt;
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; text-align: left; border-bottom-style: solid" align="left"&gt;
                &lt;strong&gt;Courses &lt;/strong&gt;
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; text-align: left; border-bottom-style: solid" align="left"&gt;
                &lt;strong&gt;Credits&lt;/strong&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; border-bottom-style: solid"&gt;
                Core
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid" id="Communication"&gt;
                Communication Course
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid"&gt;
                5
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid"&gt;
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid"&gt;
                English Course
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid"&gt;
                5
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid"&gt;
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid" id="Mathematics"&gt;
                Mathematics Course
            &lt;/td&gt;
            &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid"&gt;
                5
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;div style="display: none"&gt;
    &lt;ul&gt;
        &lt;li id="CommunicationTooltip"&gt;
            &lt;a href="#" class="toolTip"&gt;
                &lt;img src="/images/q_mark.gif" alt=""/&gt;&lt;span style="width: 500px;"&gt;Testing Communication.&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="MathematicsTooltip"&gt;
            &lt;a href="#" class="toolTip"&gt;
                &lt;img src="/images/q_mark.gif" alt=""/&gt;&lt;span style="width: 500px;"&gt;Testing Mathematics.&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;  
</code></pre>

<p>In above HTML code you will see that we have many <strong>TD</strong>, some without there <strong>ID</strong> and some <strong>TD</strong> are having <strong>ID</strong> and below you see that I have <strong>DIV</strong> with <strong>LI</strong> having <strong>ID</strong> same as used in above <strong>TD</strong> with extra <strong>Tooltip</strong> in it.</p>

<p>Now I want when pages loaded matching there <strong>ID (TD and LI)</strong> including extra <strong>Tooltip</strong> text, the below <strong>A HREF</strong> text will be added in that particular <strong>TD</strong>,so that it will result below HTML for that <strong>TD</strong> </p>

<pre><code>   &lt;td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
        border-bottom-style: solid" id="Communication"&gt;
        Communication Course 
&lt;a href="#" class="toolTip"&gt;
        &lt;img src="/images/q_mark.gif" alt=""/&gt;&lt;span style="width: 500px;"&gt;Testing Communication.&lt;/span&gt;
    &lt;/a&gt;
    &lt;/td&gt;
</code></pre>

<p>Please suggest solution using Jquery</p>
