how to select a div based on the data attribute that matches a variable?

Question

I am trying to use Jquery ui tabs with salesforce communities, if a user is being directed from a different page to the current page, based on the project id of the previous page, the current page needs to highlight the appropriate tab.

These tabs are generated based on how many project a user has which prevents me from giving them an ID inside the html

<script>
  $(document).ready(function(){
    var focusedProject = '{!focusedProjectId}';
    $('.projectTabs').each(function(){
       var id = $(this).data('salesforceprojectid');
       if(focusedProject === id){
         $('*[data-salesforceprojectid="HARD CODED ID"]').addClass('ui-state-active');
       }
    });
  });
</script>

Where you see the words hard coded Id i want to put the variable focusedProject - it doesnt seem this is possible, does anyone know an alternate solution for this?

<ul>
  <li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
  <li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
  <li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
  <li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
</ul>

Answer 1

you can't do

$('*[data-salesforceprojectid="' + focusedProject  + '"]').addClass('ui-state-active');

to make the hard coded part into a variable?