title: How to mark selected days by time of the day
body: <p>I need to show which day a user is available and weather in morning, afternoon or evening.</p>
  
  <p>I'm getting array of value for each time per user:</p>
  
  <p>morning: array(Mon,Tue,Fri)
  afternoon:array()//not available
  evening:array(Thrs)</p>
  
  <p>Now my task is, to convert the 3 or 4 letter words into 1 letter and add a green color to the font.</p>
  
  <p>By default, its shown all the days in a week with grey color.The day when user is available only will be marked in green.<br/>
  <a href="https://i.stack.imgur.com/tUrCv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tUrCv.png" alt="enter image description here"></a></p>
  
  <p>My script:</p>
  
  <p>I'm passing each array namely for morning, afternoon and evening to functions in the ajax success function.</p>
  
  <pre><code>         if(globalStore.data[i].morning!=""){
  
          splitThis_morn(globalStore.data[i].morning);
  
          }else if(globalStore.data[i].afternoon !="")
          {
                     splitThis_aft(globalStore.data[i].afternoon,globalStore.data[i].UUID);
  
          }else if(globalStore.data[i].evening !="")
          {
  
          splitThis_eve(globalStore.data[i].evening,globalStore.data[i].UUID);
  
          }
  
  function splitThis_morn(param)//this is to split 
  {
      var days = param.split(',');//
     // how to do the rest of the work here?
  
  }
  function splitThis_aft(param)//this is to split 
  {
      var days = param.split(',');//
     // how to do the rest of the work here?
  
  }
  function splitThis_eve(param)//this is to split 
  {
      var days = param.split(',');//
     // how to do the rest of the work here?
  
  }
  </code></pre>
  
  <p>HTML (1 letter word for days is shown with grey color by default)</p>
  
  <pre><code>&lt;div class='small-6 medium-6 large-6 columns text-left morning'&gt;Morning: &lt;span class='mon'&gt;M &lt;/span&gt;&lt;span class='tue'&gt;T &lt;/span&gt;&lt;span class='wed'&gt;W &lt;/span&gt;&lt;span class='thrs'&gt;T &lt;/span&gt;&lt;span class='fri'&gt;F &lt;/span&gt;&lt;span class='sat'&gt;S &lt;/span&gt;&lt;span class='sun'&gt;S&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>EDITED ANSWER BASED ON Onheiron's answer</p>
  
  <p>in ajax success fucntion passing to function like this:</p>
  
  <pre><code>if(globalStore.data[i].morning!=""){
      splitThis_morn(globalStore.data[i].morning);
      }else if(globalStore.data[i].afternoon !="")
      {
      splitThis_aft(globalStore.data[i].afternoon);
      }else if(globalStore.data[i].evening !="")
      {
      splitThis_eve(globalStore.data[i].evening);
      }
  </code></pre>
  
  <p>the functions:</p>
  
  <pre><code>  function splitThis_morn(param)
      {
          var days = param.split(',');
  
          var morning = days;
  
      for(d in morning){
          var day = morning[d]
          $('.morning &gt; .'+day.toLowerCase()).addClass('green')
      }
      }
  
  
      function splitThis_aft(param)
      {
          var days = param.split(',');
  
          var afternoon = days;
  
      for(d in afternoon){
          var day = afternoon[d]
          $('.afternoon &gt; .'+day.toLowerCase()).addClass('green')
      }
  
  
      }
      function splitThis_eve(param)
      {
          var days = param.split(',');
  
  
          var evening = days;
  
          for(d in evening){
          var day = evening[d]
          $('.evening &gt; .'+day.toLowerCase()).addClass('green')
      }
  
  
      }
  </code></pre>
  
  <p>EDITED ANSWER BASED ON Sahil's</p>
  
  <pre><code>activateDays(globalStore.data[i].morning, "morning", globalStore.data[i].UUID);
  </code></pre>
  
  <p>The function</p>
  
  <pre><code>function activateDays(activeOn, time, divId){
          activeOn = activeOn.join(',').split(',');
        //assuming that the span tags for morning,afternoon, evening are inside a div with an unique id.
        $('#'+divId +' .'+time+' span').removeClass('active');
         for(i=0;i&lt;activeOn.length;i++){
             var element = days.indexOf(activeOn[i])+1;
             $('#'+divId +' .'+time+' span:nth-child('+element+')').addClass('active');
         }
      }
  </code></pre>
  
  <p>The HTML appended via jquery within ajax success function:</p>
  
  <pre><code>&lt;div class='small-12 medium-12 large-12 columns text-left'&gt; Availability:&lt;/div&gt;&lt;div  id="+globalStore.data[i].UUID+" class='small-6 medium-6 large-6 columns text-left morning days'&gt;Morning: &lt;span class='mon'&gt;M &lt;/span&gt;&lt;span class='tue'&gt;T &lt;/span&gt;&lt;span class='wed'&gt;W &lt;/span&gt;&lt;span class='thrs'&gt;T &lt;/span&gt;&lt;span class='fri'&gt;F &lt;/span&gt;&lt;span class='sat'&gt;S &lt;/span&gt;&lt;span class='sun'&gt;S&lt;/span&gt;&lt;/div&gt;&lt;div id="+globalStore.data[i].UUID+"  class='small-6 medium-6 large-6 columns text-left afternoon days'&gt;Afternoon: &lt;span class='mon'&gt;M &lt;/span&gt;&lt;span class='tue'&gt;T &lt;/span&gt;&lt;span class='wed'&gt;W &lt;/span&gt;&lt;span class='thrs'&gt;T &lt;/span&gt;&lt;span class='fri'&gt;F &lt;/span&gt;&lt;span class='sat'&gt;S &lt;/span&gt;&lt;span class='sun'&gt;S&lt;/span&gt;&lt;/div&gt;&lt;div id="+globalStore.data[i].UUID+"  class='small-6 medium-6 large-6 columns text-left evening days'&gt;Evening: &lt;span class='mon'&gt;M &lt;/span&gt;&lt;span class='tue'&gt;T &lt;/span&gt;&lt;span class='wed'&gt;W &lt;/span&gt;&lt;span class='thrs'&gt;T &lt;/span&gt;&lt;span class='fri'&gt;F &lt;/span&gt;&lt;span class='sat'&gt;S &lt;/span&gt;&lt;span class='sun'&gt;S&lt;/span&gt;&lt;/div&gt;
  </code></pre>