jquery attr("href") returning the same values
<p>I have two links called "Read More" (bottom of code) that contain different values. When clicked, they call a jquery function that send it to demo_search.php. Problem is, no matter which link I click, I keep getting the same values. If I were to use </p>

<pre><code>var searchString = ($(this).attr("href")) 
</code></pre>

<p>instead of  </p>

<pre><code>var searchString = ($(".more_info").attr("href")) 
</code></pre>

<p>things work fine. But I cant use <code>(this)</code>. How to solve this?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;Test Search&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="my.css"&gt;
&lt;script type="text/javascript" src="http://localhost/dev/ajax/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(function() {

    $(".more_info").click(function() {

        // getting the value that user typed
        var searchString    =($(".more_info").attr("href"));

        // form the queryString
        var data            = 'search='+ searchString;
        var imgLoad         = '&lt;img src="loading.gif"&gt;';

        // if searchString is not empty
        if(searchString) {
        alert (searchString);
            // ajax call
            $.ajax({
                type: "GET",
                url:  "demo_search.php",
                data: searchString,
                beforeSend: function(html) { // this happens before actual call

                    $(".word").html(searchString);
                    $(".imgProgress").html(imgLoad);

                },
               success: function(page_data){ // this happens after we get results
                    $("#results").empty();
                    $("#results").fadeIn(200);
                    $("#results").append(page_data);
                    $(".imgProgress").empty();
              },

            });    
        }
        return false;
    });
});
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div style="margin:20px auto; text-align: center;"&gt;
&lt;form method="post"&gt;
    &lt;input type="text" name="search" id="search_box" class='search_box'/&gt;
    &lt;input type="submit" value="Search" class="search_button" /&gt;&lt;br /&gt;
&lt;/form&gt;
&lt;/div&gt;      

&lt;div&gt;
&lt;div id="searchresults"&gt;Search results for &lt;span class="word"&gt;&lt;/span&gt;&lt;span class="imgProgress"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div id="results" class="update" style="display:none;"&gt;&lt;ul&gt;&lt;/ul&gt;

&lt;/div&gt;
&lt;div&gt;
&lt;a href="search=sony&amp;offset=20&amp;lang=en" class="more_info"&gt;Read More&lt;/a&gt;
&lt;a href="search=pioneer&amp;offset=30&amp;lang=en" class="more_info"&gt;Read More&lt;/a&gt;
&lt;/div&gt;


&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
