在php回显字符串中调用js函数，onclick的正确方法

I have these if statements that display sizes for a product. I want to change the css styling of the size when it's clicked so the user knows that one was clicked.

deep within my php script i have 3 if statements

echo " <script type='text/javascript' src='ryan.js'></script>";    
            if ($varGetProductArray1[4] > 0){
                    echo '  <div id ="sizeButton1"class="sizeButton" onclick="ryanClicked(\'sizeButton1\',\'sizeButton2\',\'sizeButton3\')">      S </div> ' ;
            }

            if ($varGetProductArray1[5] > 0){

                    echo ' <div id ="sizeButton2"class="sizeButton" onclick="ryanClicked(\'sizeButton2\',\'sizeButton1\',\'sizeButton3\')">      M </div> ';
            }
            if ($varGetProductArray1[6] > 0){

                    echo '          <div id ="sizeButton3"class="sizeButton" onclick="ryanClicked(\'sizeButton3\',\'sizeButton1\',\'sizeButton2\')">      L </div> ';
            }

there's the starting and ending php tags farther from the document. then ryan.js just has a function

function ryanClicked(id, b, c,){
  b = b || null;
  c = c || null;
document.getElementById(id).style.borderColor = "black";
document.getElementById(b).style.borderColor = "#e0e0e0";
document.getElementById(c).style.borderColor = "#e0e0e0";
}

if I don't include the if statements it works but i'm not sure why is it because the html loads before onclick function does? How could I get around this?