Display list of checkbox items except selected dropdown item
<p>I have dropdown list of items and a popup (used colorbox for opening popup) with a list of checkboxes. The popup is shown on click of <em>'+Add/Edit'</em>. Both the dropdown items and the checkboxes are generated in PHP from a <code>complaint.csv</code> file.</p>

<p><a href="https://i.stack.imgur.com/Hhocw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hhocw.png" alt="The main form"></a>
<a href="https://i.stack.imgur.com/BMzrP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BMzrP.png" alt="The popup"></a></p>

<p><strong>complaint.csv file</strong> </p>

<pre><code>1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...
</code></pre>

<p><strong>PHP code</strong></p>

<pre><code>&lt;label class="question-name" ng-class="{error:hasError()}"&gt;
  &lt;span class="ng-binding" ng-hide="question.nameHiddenOnMobile"&gt;
    Chief Complaint
  &lt;/span&gt;
  &lt;span class="icon-required" ng-show="question.required"&gt;&lt;/span&gt;
&lt;/label&gt;

&lt;select name="Language.PrimarySpoken" ng-hide="showAddAnswer"
        ng-model="question.response.value" 
        ng-options="a.text as a.getText() for a in question.answers.items"
        id="Language.PrimarySpoken" ng-value="a.text" class="input-wide" 
        ng-class="{error:hasError()}"&gt;
  &lt;option class="hidden" disabled="disabled" value=""&gt;&lt;/option&gt;

  &lt;?php
    $file_handle = fopen("../complaint.csv", "r");
    while (!feof($file_handle)) {
      $lines_of_text[] = fgetcsv($file_handle, 1024);
    }
    fclose($file_handle);

    foreach ( $lines_of_text as $line_of_text): 
  ?&gt;
      &lt;option value="&lt;?php print $line_of_text[1]; ?&gt;"&gt;
        &lt;?php print $line_of_text[1]; ?&gt;&lt;/option&gt;
      &lt;?php endforeach; ?&gt;
    &lt;/select&gt;
    &lt;br/&gt; &lt;br/&gt;

    &lt;label class="question-name" ng-class="{error:hasError()}"&gt;
      &lt;span class="ng-binding" ng-hide="question.nameHiddenOnMobile"&gt;
        Additional Complaint
      &lt;/span&gt;
      &lt;span class="icon-required" ng-show="question.required"&gt;&lt;/span&gt;
    &lt;/label&gt;

    &lt;div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text" &gt;&lt;/div&gt;
    &lt;div class="form-row addlink ng-binding" 
         ng-bind-html="question.getText()"&gt;
      &lt;em&gt;&lt;a class='inline' href="#inline_content"&gt;+ Add/Edit&lt;/a&gt;&lt;/em&gt;
    &lt;/div&gt;

    &lt;div style='display:none'&gt;
      &lt;div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'&gt;

        &lt;form action="" id="popup_form"&gt;

       &lt;?php

        // Setup ---------------------------------------------------------------        
        define('numcols',4);  // set the number of columns here
        $csv = array_map('str_getcsv', file('../complaint.csv'));
        $numcsv = count($csv);
        $linespercol = floor($numcsv / numcols);
        $remainder   = ($numcsv % numcols);
        // Setup ---------------------------------------------------------------        


        // The n-column table --------------------------------------------------
        echo '&lt;div class="table"&gt;'.PHP_EOL;
        echo '   &lt;div class="column"&gt;'.PHP_EOL;

        $lines = 0;
        $lpc   = $linespercol;
        if ($remainder&gt;0) { $lpc++; $remainder--; }
        foreach($csv as $item) {
            $lines++;
            if ($lines&gt;$lpc) {
                echo '   &lt;/div&gt;' . PHP_EOL . '&lt;div class="column"&gt;'.PHP_EOL;
                $lines = 1;
                $lpc   = $linespercol;
                if ($remainder&gt;0) { $lpc++; $remainder--; }
            }
            echo '      &lt;label class="checkbox" for="checkbox'.$item[0].'" style="font-size:20px;"&gt;
                        &lt;input type="checkbox" name="complaint" value="'.$item[1].'" id="checkbox'.$item[0].'" data-toggle="checkbox"&gt;'
                            .$item[1].
                        '&lt;/label&gt;&lt;br /&gt;';
        }
        echo '   &lt;/div&gt;'.PHP_EOL;
        echo '&lt;/div&gt;'.PHP_EOL;
        // The n-column table --------------------------------------------------


    ?&gt;
         &lt;br/&gt;
         &lt;input type="submit" name="submit" id="update" 
                class="button button-orange" 
                style="width: 90px; margin-top: 450px; margin-left:-1062px;" 
                value="Update"&gt;
         &lt;input type="submit" name="cancel" id="cancel" 
                class="button button-orange" 
                style="width: 90px; background-color:#36606e;" 
                value="Cancel"&gt;

        &lt;/form&gt;    
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p><strong>Question:</strong></p>

<ol>
<li>If a <em>Main complaint</em> item is select then that same complaint does not appear in Additional Complaint list (i.e. if 'complaint type 1' is selected for Main complaint, 'complaint type 1' does not display on Additional Complaint list)</li>
</ol>

<p>How should I get that using one <code>complaint.csv</code> file like checking for the selected item, and avoid it when displaying the list e.g  on select 'complaint type 1', the data from <code>complaint.csv</code> file will be display on popup checkbox list except 'complaint type 1' which is selected?</p>

<ol start="2">
<li>There is <strong>empty space</strong> generating if we remove the element. I don't want the empty space of removed item in checkbox list. Empty space means if 'complaint type 2' is removed then there empty space creates between 'complaint type 1' and 'complaint type 3'. </li>
</ol>

<p>Is there any way to have <code>AJAX</code> for this situation like when the item is selected <code>AJAX</code> will call and it will remove the item from the checkbox list which is selected and then load the new items list except the selected one. (right now both list are loading at a same time on page load insted of that using <code>AJAX</code> the dropdown list should load on page load and checkbox list on click <em>'+Add/Edit'</em> button avoiding selected item.) Thus might be the empty space will not be there. </p>

<p>How this should be done using <code>AJAX</code>?</p>

<p>OR </p>

<p>Can anyone please suggest any solution with <code>PHP</code> or <code>JS</code> to get both requirements?</p>