[FIXED] How to get "onclick" content to show next to dynamically created content

Issue

I have a dynamically created list that displays radio buttons next to it. When the radio button is changed I want a dropdown list to appear next to the dynamically created list and radio button that was changed. Basically if I change the button to yes (visible), I want a dropdown list to appear next to it... so depending on how many items are in my list and depending on which ones are set to yes, would be the amount of drop down lists that appear to set the positions (with 8 of the same fixed options in each dynamically created dropdown list).

All I have come up with so far is to create an onchange event in jQuery and "unhide" a pre-made dropdown list - the code works fine but it isn't what is needed. I'll post the code and a picture below:

//K's function:
        function get_all_pages() {
        global $connection;
        $query = "SELECT * 
                FROM pages ";
        $query .= "WHERE visible = 1 ";
        $query .= "ORDER BY position ASC";
        $page_set = mysql_query($query, $connection);
        confirm_query($page_set);
        return $page_set;
    }
//K's function:
function list_all_pages(){
$output = "<ul>";
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";
$output .= "&nbsp;&nbsp;<input type=\"radio\" class=\"unchecked\" onclick=\"uncheck()\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input type=\"radio\" class=\"checked\" onclick=\"check()\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";
    }
$output .= "</ul>";
return $output;
}   
---------- jquery
<script type="text/javascript">
 $(document).ready(function() {
//alert("document ready");
   $('#position').hide();


 });

$('.checked').change(function() {
     $('#position').show();
});
$('.unchecked').change(function() {
     $('#position').hide();
});
</script>

--------- html (not what is wanted but the only thing I've got going right now....

<form>
<?php echo list_all_pages(); ?>

<div id="position">

<select name="position">
var count;
for (count=1; count <= 8; count++) {
<option value='count'>count</option>;
        }
</select>

</div>

</form>  

New information as of August 27th:
It is semi-working thanks to redrazor11's help in jfiddle... the JavaScript onchange in the PHP loop is working but only for the first <li>... in fact when I click on the other <li> radio buttons the dropdown menu sometimes appears under the first <li> again... code and new pictures are posted below:

    //K's function:
    function list_all_pages(){
    $output = "<ul>";
    $page_set = get_all_pages();
    while ($page = mysql_fetch_array($page_set)) {
    $output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";
    
    
    
    $output .= "&nbsp;&nbsp;<input onchange=\"javascript:document.getElementById(1).style.display = 'block';\" type=\"radio\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input onchange=\"javascript:document.getElementById(1).style.display = 'none';\" type=\"radio\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";
    
    $output .= "<div id='1' style='display: none'><select name='position'><option value='count'>1</option><option value='count'>2</option><option value='count'>3</option></select></div>";
    
    
    
        }
    $output .= "</ul>";
    return $output;
    }   

Sept 2nd edits:
I tried the $counter as the ID and then tried using the $page[id] and both returned results that worked in terms of getting the div to show up in each li... but there seems to be a problem with the onclick JavaScript working correctly... I'm going to post the link if redrazor11 or someone could take a look and maybe figure out this bizarre behavior that is happening on the onclick? link:

http://www.firetreegraphics.com/widget_corp-final/add_feature.php

Here is the recent code changed:

//K's function:
function list_all_pages(){
$output = "<ul>";
//$output .= $counter = 0;
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";

$output .= "&nbsp;&nbsp;<div id=\"$page[id]\" style='display: none'><select name='position'><option value='count'>1</option><option value='count'>2</option><option value='count'>3</option></select></div>";

$output .= "&nbsp;&nbsp;<input onchange=\"javascript:document.getElementById('$page[id]').style.display = 'block';\" type=\"radio\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input onchange=\"javascript:document.getElementById('$page[id]').style.display = 'none';\" type=\"radio\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";

//$output .= $counter = $counter+1;

    }
$output .= "</ul>";
return $output;
}   

Solution

See this fiddle I found on an earlier stack exchange post.

The idea is to hide the div with the selection box until you're ready for it to be displayed/populated. You can have have different id'd divs available depending on what was selected. In this example, it's a drop-down that causes the content to appear, but it's a similar idea for radio buttons.

http://jsfiddle.net/cpradio/YvN4Q/

Answered By - cmaines

Answer Checked By - Marilyn (PHPFixing Volunteer)