How to create multiple autocomplete in an input field based on a sentence structure?

The sentence structure of my autocomplete is:

<Occupation> <for> <time period>

Example:

• Student for 5 years
• Teacher for 2 years

In the database, I have a column containing a list of occupations. With jQuery UI autocomplete, I populate the first two sections in the text input using the following codes:

<script>
    $(function() {
        $("#occupation").autocomplete({
            source: 'search.php',
            delay: 500,
            select: function(event, ui) {
                $(this).val(ui.item.value)
            }
        });
    });
</script>
<input type='text' name='occupation' id='occupation’>

The search.php code:

<?php
$searchTerm = $_GET['term'];
$query = $db->query("SELECT DISTINCT occupation FROM table WHERE occupation LIKE '%" . $searchTerm . "%' ORDER BY occupation ASC");
$a_json = array();

while ($row = $query->fetch_assoc())
    {
    $data_row["value"] = $row['occupation'] . ' for';
    $data_row["label"] = $row['occupation'];
    array_push($a_json, $data_row);
    }

echo json_encode($a_json);

Now, is there any way to create a second trigger to make an autocomplete for the rest? Like after selecting an occupation, if the user inputs 5, it’ll show the following autocomplete options for the time period: 5 days/ 5 weeks/ 5 months/ 5 years. Like the image below:

Thanks in advance for your suggestions.