Radio inputs in a List.js fuzzy-search not making it to POST

I have a form that allows people to fill out a 'duty roster', selecting a person from a list who is responsible for a particular task. I am using List.js's fuzzy search to quickly find the desired record.

For some reason, the input fields from the List.js list are not being picked up when I process the form.

I've ensured that the 'name' of the each batch of radios are not in conflict with another field in the form. The inputs display properly, with name, id, value, and type. But they don't appear in the POST array upon submission.

HTML from the List.js search

<form id = "form" action = "" method = "POST">   
  // List.js fuzzy-search and some wrapper divs 
  <ul class = "list">
    <li>
        <label>
            <input type = "radio" name = "officiant" value = "4" id = "dir4">
            <span class = "name">Calum MacFarlane</span> (<span class = "church">St. Aidan Anglican Church</span> , <span class = "parish">Moose Jaw</span>, <span class = "diocese">Qu'Appelle</span>)
        </label>
    </li>
    <li>
        <label>
            <input type = "radio" name = "officiant" value = "2" id = "dir2">
            <span class = "name">Dean Pinter</span> (<span class = "church">St. Aidan Anglican Church</span> , <span class = "parish">Moose Jaw</span>, <span class = "diocese">Qu'Appelle</span>)
        </label>
    </li>
  </ul>

    // more form elements

    <button type = "submit">Submit</button>
</form>

When submitted, $_POST ought to have a 'officiant' element carrying the input's value. But it is omitted from $_POST.

These List.js search boxes are generated by a PHP class and functions I wrote, so that I could add the search functionality into a page for multiple items. Each set of radios has a unique 'name' ('day', 'preacher', 'church_id', etc.).

Since the generated HTML is properly intact, I'm wondering if something in List.js could be causing an issue.

CSS

Or perhaps there's an issue with the way I've set up the searchboxes' CSS? I've hidden the actual radio buttons and cause the label to be highlighted when a user makes a selection:

.select-wrapper .list li label input[type="radio"] {display: none;}
.select-wrapper .list li label {
    display: inline-block;
    background: #eee;
    font-weight: 400;
    font-style: italic;
    padding: 6px 16px;
    cursor: pointer;
    width: 100%;
}
.select-wrapper .list li label input[type="radio"]:checked ~ *, .select-wrapper .list li label.active {color: #000; font-weight: 700;}

I tested the CSS by setting the inputs to display:block so that I could tell visually if the radio button was selected, and the result was the same -- none of these List.js inputs are making it to POST.

I can post the PHP code from my function if that would be helpful. I didn't post it immediately since the generated HTML appears to be correct. I'd appreciate your help. I've been at this for a while and am at a loss. Passing values to POST should be a simple matter!

Solution

The problem ended up being a conflicting "list" class from one of my PHP functions. was wrapping the form erroneously because I didn't have my conditions expressed correctly. This "list" conflict was preventing List.js from functioning the way it's designed, since each "list" needs to be in its own container.

It's a good idea to take a look at ALL the generated HTML when working with OOP...