how to each li of multiple ul with same class

Question

I have multiple ul with different data attr(data-status) if data-status is equal to data-step then it will add class name "half" -1. li will have the class name "active" and the rest will have the class name 'complete' but if data-step equals data-status, it will add the class name "finish" and the rest of the li will have the class name "complete".

 <ul class="progressbar" data-status="3">
      <li data-step="1" /*need to add class "complete"*/>aa</li>
      <li data-step="2" /*need to add class "active"*/>bb</li>
      <li data-step="3" /*need to add class "half"*/>cc</li>
      <li data-step="4" /*there will be no class"*/>dd</li>
      <li data-step="5" /*there will be no class"*/>ee</li>
 </ul>

 <ul class="progressbar" data-status="4">
      <li data-step="1" /*need to add class "complete"*/>aa</li>
      <li data-step="2" /*need to add class "complete"*/>bb</li>
      <li data-step="3" /*need to add class "active"*/>cc</li>
      <li data-step="4" /*need to add class "half"*/>dd</li>
      <li data-step="5" /*there will be no class"*/>ee</li>
 </ul>

<ul class="progressbar" data-status="5">
      <li data-step="1" /*need to add class "complete"*/>aa</li>
      <li data-step="2" /*need to add class "complete"*/>bb</li>
      <li data-step="3" /*need to add class "complete"*/>cc</li>
      <li data-step="4" /*need to add class "complete"*/>dd</li>
      <li data-step="5" /*need to add class "finish"*/>ee</li>
 </ul>

Answer 1

I am not entirely sure I understand what you are trying to ask.

I assume you are looking for a function that will return a string (for a class name) that is one of( '', 'complete', 'half', 'finish') based on the value of a variable dataStatus.

If that is the case then your ul could look something like this:

            <ul className="progressbar" data-status={dataStatus}>
                <li data-step="1" class={getClassName(1, dataStatus)} >aa</li>
                <li data-step="2" class={getClassName(2, dataStatus)} >bb</li>
                <li data-step="3" class={getClassName(3, dataStatus)} >cc</li>
                <li data-step="4" class={getClassName(4, dataStatus)} >dd</li>
                <li data-step="5" class={getClassName(5, dataStatus)} >ee</li>
            </ul>

and the getClassName function could be something like this:

    const getClassName = (dataStep, dataStatus) => dataStatus > dataStep ? '' : dataStatus === dataStep ? dataStatus === '5' ? 'finish' : 'half' : 'complete'

But I don't really know what you are asking.