JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.7.2/rivets.bundled.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.8/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.8/chosen.min.css">
<div id="contentWrap">
    <ol rv-each-truck="truck" rv-value="truck.id">
        <li rv-each-job="jobs | compare truck.id" rv-value="job.id">{ job.job_number }</li>
    </ol>
</div>

CSS

#contentWrap select {
    width:300px
}

JavaScript

$(document).ready(function(){
    
    rivets.formatters.compare = function(array, compare) {
        
        var tempArr = [];
        
        array.forEach(function(element, index, array) {
            if (element.id == compare) {
                tempArr.push(element);
            }
        });
        
        console.log(tempArr);
        
        return tempArr;
    }
    
    window.view = rivets.bind($('#contentWrap'),{
        truck:[{id:1},
               {id:2},
               ],
        jobs:[
            {id:1,job_number:'thing1'},
            {id:1,job_number:'thing2'},
            {id:1,job_number:'thing3'},
            {id:1,job_number:'thing4'},
            {id:2,job_number:'thing5'},
            {id:2,job_number:'thing6'},
            {id:2,job_number:'thing7'},
            {id:2,job_number:'thing8'},
        ]
    });
    
});