Using radio box selection to display multiple DIVs

I need to be able to use three radio buttons to determine which P’s display on a page. All items are queried from a database so there is no fixed number. I’d like to stick with javascript if possible. All is written inside PHP code

Tried using the following:

        <?php
        //Javascript function to show selected duration price:
        echo"<script>
        function showPrice(duration)
        {
            if(duration == "1")
            {
                var a = document.querySelectorAll('p[id^=price1]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display="block;";
                }



            }
            else
            {
                var a = document.querySelectorAll('p[id^=price1]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display="none;";

                }

            }
            if(duration == "2")
            {
                var a = document.querySelectorAll('p[id^=price2]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display="block;";

                }

            }
            else
            {
                var a = document.querySelectorAll('p[id^=price2]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display="none;";

                }

            }
            if(duration == "3")
            {
                var a = document.querySelectorAll('p[id^=price3]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display="block;";

                }

            }
            else
            {
                var a = document.querySelectorAll('p[id^=price3]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display="none;";

                }

            }

        }
        </script>
        ";

Then each P will have the option of 6 prices that should only be visible if the corresponding radio options are selected:

    while($pack_row = mysql_fetch_array($packageResults))
    {
        echo"<div class=submenuContainer style="margin: 0px 0px 0px $leftMargin"."px; width: $product_params[linkContainerWidth]"."px;">";
        echo"nnn <a class=submenu title="{$pack_row["package_name"]}" id='package_id' href="javascript:ajaxFunction({$pack_row["package_id"]},null);inPagePopup();" style="background-image: url('$link_bg_img');  height: $product_params[link_height]"."px; width: $product_params[link_width]"."px; ">";
        echo"n</a>";
        echo"n<span class=submenuExtraText>";
        $pricesAry = price_calculator("{$pack_row["package_id"]}","","","");
        echo"n <p style="float: left; text-align: left;"><input class="$radioInputStyle" type=radio name=leaseInfo[packageID] value={$pack_row["package_id"]}> SELECT</p>";

    //P's hidden unless lease duration selected below
        echo"n <p class='priceDisplay' id='price1".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][1]."</b></p>";
        echo"n <p class='priceDisplay' id='price2".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][2]."</b></p>";
        echo"n <p class='priceDisplay' id='price3".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][3]."</b></p>";
        echo"n <p class='priceDisplay' id='price4".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][4]."</b></p>";
        echo"n <p class='priceDisplay' id='price5".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][5]."</b></p>";
        echo"n <p class='priceDisplay' id='price6".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][6]."</b></p>";
        echo"n</span>"; 
        echo"n</div>";
        $ck++;
        $t++;
    }

And here are the radio boxes:

        echo"<b>How long?</b><br>";
        echo"<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1);"> 3  &#160&#160&#160&#160";  
        echo"<input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2);" checked> 6  &#160&#160&#160&#160";
        echo"<input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3);"> 12  &#160&#160&#160&#160";
        echo"<br><br>";


?>

Answer

Something like this?

JSFiddle

function showPrice(duration) {
    var prices = document.getElementsByClassName('priceDisplay');
    for (var i = 0; i < prices.length; i++) {
        var price = prices[i];
        if (price.classList.contains('p'+ duration))
            price.style.display = "block";
        else
            price.style.display = "none";
    }
}

<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1)" checked><label for=duration1> Price 1</label>
<input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2)"><label for=duration2> Price 2</label>
<input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3)"><label for=duration3> Price 3</label>

<h3>Item 1</h3>
<p class='priceDisplay p1' id='price1-i1'><b>Price1: $35.45</b></p>
<p class='priceDisplay p2' id='price2-i1' style='display: none;'><b>Price2: $22.45</b></p>
<p class='priceDisplay p3' id='price3-i1' style='display: none;'><b>Price3: $654.45</b></p>
<p class='priceDisplay p4' id='price4-i1' style='display: none;'><b>Price4: $11.45</b></p>
<p class='priceDisplay p5' id='price5-i1' style='display: none;'><b>Price5: $5.45</b></p>
<p class='priceDisplay p6' id='price6-i1' style='display: none;'><b>Price6: $77.45</b></p>

<h3>Item 2</h3>
<p class='priceDisplay p1' id='price1-i2'><b>Price1: $45.65</b></p>
<p class='priceDisplay p2' id='price2-i2' style='display: none;'><b>Price2: $12.45</b></p>
<p class='priceDisplay p3' id='price3-i2' style='display: none;'><b>Price3: $14.35</b></p>
<p class='priceDisplay p4' id='price4-i2' style='display: none;'><b>Price4: $32.46</b></p>
<p class='priceDisplay p5' id='price5-i2' style='display: none;'><b>Price5: $45.52</b></p>
<p class='priceDisplay p6' id='price6-i2' style='display: none;'><b>Price6: $99.76</b></p>