Set up

<?php
include 'head.php';
?>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    //SelectSort(SS2);
}
function moveUp(SS1)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=0; i<=SS1.options.length - 1; i++)
    {
        if (SS1.options[i].selected == true)
        {
            //check that the move is valid i.e the item is not at the top of the list
            if(i!=0){
            // Swap down(moving up the list)
            ID=SS1[i].value;
            Text=SS1[i].text;
            SS1[i].value=SS1[i-1].value;
            SS1[i].text=SS1[i-1].text;
            SS1[i-1].value=ID;
            SS1[i-1].text=Text;
            SS1.options[i].selected = false;
            SS1.options[i-1].selected = true;
            }else{
            //tell the user there was an error
            alert('One of the items was already at the top of the list!');
            }
        }
    }
}
function moveDown(SS1)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            //check if the move is valid i.e. if the item is not at the bottom of the list
            if(i!==SS1.options.length-1){
            // Swap down(moving up the list)
            ID=SS1[i].value;
            Text=SS1[i].text;
            SS1[i].value=SS1[i+1].value;
            SS1[i].text=SS1[i+1].text;
            SS1[i+1].value=ID;
            SS1[i+1].text=Text;
            SS1.options[i].selected = false;
            SS1.options[i+1].selected = true;
            }else{
            //tell the user there was an error
            alert('One of the items you have selected is already at the bottom of the list!');
            }
        }
    }
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
</script>
<div style="position:relative;top:100px;">
<form name="Example">
<center>
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <h2>What group does this rule apply to?</h2>
            <label for="year">Year:</label>
            <select id="year">
                <option value="1">All years</option>
                <option value="2">Lower school (years:7,8,9,10,11)</option>
                <option value="3">KS3 (years:7,8,9)</option>
                <option value="4">KS4 (years:10,11)</option>
                <option value="5">Sixth form (years:12,13)</option>
                <?php for($i=7;$i<=13;$i++){echo "<option value='" . $i ."'>Year " . $i . "</option>";}?>
            </select>
            <br />
            <label for="subject">Subject:</label>
            <select id="subject">
                <option value="0">All subjects</option>
                <option value="1">Arts</option>
                <option value="2">Sciences</option>
                <option value="3">Humanities</option>
            <select>
            <hr />
            <label for="class">OR a specific class:</label>
            <input type="text" id="class" /><br/>
        </td>
        <td></td>
        <td width="510px">
            <p class="information">Select the questions from the past that you want to use with each subject. Once you are done click select questions and the questions in the 'to be used' box will be assigned.</p>
            <input type="button" value="Select questions" />
        </td>
    </tr>
    <tr>
        <td>
            <select name="allQuestions" size="10" style="width:500px;" MULTIPLE>
            <?php
                include 'scripts/sql.php';
                $QRY0 = "SELECT * FROM questions ORDER BY 'PID' ASC";
                $results = mysqli_query($con,$QRY0);
                while($row = mysqli_fetch_array($results)){
                    echo "<option value='" . $row['PID'] . "'>". $row['Question'] . "</option>";
                }
            ?>
            </select><br />
            <input type="text" > <input type="button" value="Add Question" />
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.allQuestions,document.Example.selectedQuestions)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.selectedQuestions,document.Example.allQuestions)">
        </td>
        <td>
            <select name="selectedQuestions" size="10" style="width:500px;" MULTIPLE>
            </select>
            <br /><input type="button" value="Move question up" onclick="moveUp(document.Example.selectedQuestions)" /><input type="button" value="Move question down" onclick="moveDown(document.Example.selectedQuestions)"/>
        </td>
    </tr>

</table>
</center>
</form>
</div>
</body>
</html>