Highlight mysql dynamically generated table based on user highlight and storing information permanently

I have a table with a highlight option on each row. The table is generated dynamically from mysql data. Currently, when a user selects a color from a drop down menu, the color of the row changes. Each row has its own drop down. My question is, how can I store this css information in my database so the next time a user accesses the site the table is already highlighted? Here is the code I use to change the color of the table row when using the drop down

<script>
    $(document).ready(function () {
        $(document).on('click', 'tr', function () {
            var color = ['none', 'green', 'yellow', 'red'];
            $('select').change(function() {
                $(this).parents('tr').css('background', color[$(':selected', this).index()]);
            });
        });
    });
    </script>

The table rows are generated dynamically using an ajax request. I know text can easily be made dynamic and updated but I am trying to find a way to modify a php or css sheet that can store the info. I am not sure how as the selected row here changes and each row has its own drop down.

Here is the code I use for generating each table row.

$(document).ready(function($)
{    
    function create_html_table (tbl_data)
    {

        //--->create data table > start
        var tbl = '';
        tbl +='<table>'

            //--->create table header > start
            tbl +='<thead>';
                tbl +='<tr>';
                tbl +='<th></th>';
                tbl +='<th></th>';
                tbl +='<th></th>';
                tbl +='<th></th>';

                tbl +='</tr>';
            tbl +='</thead>';



            tbl +='<tbody>';

                $.each(tbl_data, function(index, val) 
                {
                    var row_id = val['row_id'];

                    tbl +='<tr row_id="'+row_id+'">';
                        tbl +='<td><select name="Select1"><option></option><option>Red</option><option>Yellow</option><option>Green</option></select></td>'
                        tbl +='<td ><div>'+val['']+'</div></td>';
                        tbl +='<td ><div>'+val['']+'</div></td>';
                        tbl +='<td ><div>'+val['']+'</div></td>';



            tbl +='</tbody>';

        tbl +='</table>';


        //out put table data
        $(document).find('.tbl_user_data').html(tbl);



    }


    var ajax_url = "<?php echo APPURL;?>/ajax.php" ;
    var ajax_data = <?php echo json_encode($q1);?>;

    //create table on page load
    //create_html_table(ajax_data);

    //--->create table via ajax call > start
    $.getJSON(ajax_url,{call_type:'get'},function(data) 
    {
        create_html_table(data);
    });
    //--->create table via ajax call > end

Copyright Notice：Content Author:「Sarah Munir」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/53376988/highlight-mysql-dynamically-generated-table-based-on-user-highlight-and-storing