Radio buttion - display data on click

Radio buttion - display data on click

I am trying to use radio buttons to display data received from PHP via a MySQL database.

The following code works in that it will indeed display the data upon clicking a choice.

Subsequent clicks on the other two choices in the same session, however, do not result in a display of anything but from the original click.

The new data is recovered (as verified by firebug) on subsequent clicks but is not displayed.

I've tried variations of .hide(), .show() and .toggle() but I'm obviously on the wrong track. 

Any help would be greatly apperciated.

RP



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
#patient {
    font-size: 1.5em;
    font-weight: bold;
    }
#patientname {
    color: red;
    }    
</style>

<script type="text/javascript" src="/jquery/jquery-1.5.1.js"></script>

<script type="text/javascript" >

    $(document).ready(function(){
    
    });
    
    function trip() {
alert("in trip");    
    
 // $("#content").hide();
  //$('#content').remove();
    var patient =$('input[name=pick]:checked').val()
    
    $("#content").append('<p id="patient" > Patient '+ "<span id='patientname'>" + patient + '</span></p>');
      $("#content").show();
    
    var url="JSON-test.php";

        $.getJSON(url, {'patient': patient}, function(myResponse){
           // loop through the posts here            
            $.each(myResponse.drugs,function(i,cb){
                $("#content").append (
                    '<div class="post">'+
                    '<p>Drug Id:'+cb.Id+'</p>'+
                        '<p>Doctor Id: '+cb.DoctorId+'</p>'+
                    '<p>Pharmacy Id: <em>'+cb.PharmacyId+'</em></p>'+
                    '<p>Drug: <strong>'+cb.Name+'</strong></p>'+
                    '<p>Prescription No: <em>'+cb.RX+'</em></p>'+                    
                    '<p>Order Date: <em>'+cb.Orderdate+'</em></p><br><br>'+                            
                '    </div>'
                    );
            }); // end each

        }); // end myResponse    
      
    }    // end trip    

    //}); // end doc ready    
    
</script>

</head>
    
<body>
    

    <div id="pickname">

    <form action="" name="form0" id="form0">
        <p>Rick: <input type="radio" name="pick" value="Rick" onclick="trip()"></input></p>
        <p>Polly: <input type="radio" name="pick" value="Polly" onclick="trip()"></input></p>
        <p>Rick & Polly: <input type="radio" name="pick" value="Rick & Polly" onclick="trip()"></input></p>        
    </form>
            
    </div>
    
    <div id="content">

    </div>
 

</body>
</html>