title: Append HTML based on values in a comma separated string
body: <p>I am currently trying to determine what HTML is to be appended to the web page which is generated for users based on what values the have in a comma separated string which is stored in a MD array.</p>
  
  <p>I need to be able to check that comma separated string for each value and append HTML based on the values.</p>
  
  <p>At the moment I have it working with single values but if there is more than one value....how to I then go through each EG "html1, html2" I want to be able to identify that html 1 &amp; html 2 is there therefore generate the links etc.</p>
  
  <p>Below is a JS fiddles and example of what I have at the moment, just alter the test 1 value to match up with values in the array if need be.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function($) {
    var $htmlele = $('.side-contain');
    var data = [
      ["test1", "user", "yes", "html1,html2"],
      ["test2", "admin", "yes", "html1"],
      ["test3", "user", "no", "html2"],
      ["test4", "user", "no", "html1,html2,html3,test"]
    ]
  
    function append_ele() {
      var userval = $('#user').text();
      var userstr = userval.substring(0, userval.indexOf(" "));
      for (var i = 0; i &lt; data.length; i++) {
        if (data[i][0] === userstr &amp;&amp; data[i][3] === "html1") {
          $htmlele.append('&lt;a href="https://html1.test" class="list-group-item btn"&gt;HTML 1&lt;/a&gt;');
        } else if (data[i][0] === userstr &amp;&amp; data[i][3] === "html2") {
          $htmlele.append('&lt;a href="https://html2.test" class="list-group-item btn"&gt;HTML 2&lt;/a&gt;');
        } else if (data[i][0] === userstr &amp;&amp; data[i][3] === "html3") {
          $htmlele.append('&lt;a href="https://html3.test" class="list-group-item btn"&gt;HTML 3&lt;/a&gt;');
        }
      }
    }
  
    $(document).ready(function() {
      $('[data-toggle=offcanvas]').click(function() {
        if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
          $('.list-group-item').attr('tabindex', '-1');
        } else {
          $('.list-group-item').attr('tabindex', '');
        }
        $('.row-offcanvas').toggleClass('active');
      });
    });
    append_ele();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding-top: 50px;
  }
  
  html,
  body {
    overflow-x: hidden;
    /* Prevent scroll on narrow devices */
    height: 100%;
  }
  
  body {
    padding-top: 70px;
  }
  
  footer {
    padding: 30px 0;
  }
  
  .navbar-inverse .navbar-brand:hover,
  .navbar-inverse .navbar-brand:focus {
    background-color: transparent;
    color: #999999;
  }
  
  .head {
    background: #668B8B;
    color: #000000;
  }
  
  .side-contain {
    margin-top: 5px;
    border: 2px solid #668B8B;
    border-radius: 10px;
  }
  
  .dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu&gt;.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
  }
  
  .dropdown-submenu:hover&gt;.dropdown-menu {
    display: block;
  }
  
  .dropdown-submenu&gt;a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
  }
  
  .dropdown-submenu:hover&gt;a:after {
    border-left-color: #fff;
  }
  
  .dropdown-submenu.pull-left {
    float: none;
  }
  
  .dropdown-submenu.pull-left&gt;.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
  }
  
  @media screen and (min-width: 768px) {
    .row-offcanvas {
      position: relative;
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      transition: all .25s ease-out;
    }
    .row-offcanvas-right {
      right: 20%;
    }
    .row-offcanvas-left {
      left: 20%;
    }
    .row-offcanvas-right .sidebar-offcanvas {
      right: -20%;
      /* 3 columns */
      background-color: rgb(255, 255, 255);
    }
    .row-offcanvas-left .sidebar-offcanvas {
      left: -20%;
      /* 3 columns */
      background-color: rgb(255, 255, 255);
    }
    .row-offcanvas-right.active {
      right: 0;
      /* 3 columns */
    }
    .row-offcanvas-left.active {
      left: 0;
      /* 3 columns */
    }
    .row-offcanvas-right.active .sidebar-offcanvas {
      background-color: rgb(254, 254, 254);
    }
    .row-offcanvas-left.active .sidebar-offcanvas {
      background-color: rgb(254, 254, 254);
    }
    .row-offcanvas .content {
      width: 80%;
      /* 9 columns */
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      transition: all .25s ease-out;
    }
    .row-offcanvas.active .content {
      width: 100%;
      /* 12 columns */
    }
    .sidebar-offcanvas {
      position: absolute;
      top: 0;
      width: 20%;
      /* 3 columns */
    }
  }
  
  @media screen and (max-width: 767px) {
    .row-offcanvas {
      position: relative;
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      transition: all .25s ease-out;
    }
    .row-offcanvas-right {
      right: 0;
    }
    .row-offcanvas-left {
      left: 0;
    }
    .row-offcanvas-right .sidebar-offcanvas {
      right: -50%;
      /* 6 columns */
    }
    .row-offcanvas-left .sidebar-offcanvas {
      left: -50%;
      /* 6 columns */
    }
    .row-offcanvas-right.active {
      right: 50%;
      /* 6 columns */
    }
    .row-offcanvas-left.active {
      left: 50%;
      /* 6 columns */
    }
    .sidebar-offcanvas {
      position: absolute;
      top: 0;
      width: 50%;
      /* 6 columns */
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Byphone Auth&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand"&gt;Test Application&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;form action="/logout" class="navbar-form navbar-right"&gt;
              &lt;button class="btn btn-success" type="submit" id="user" onsubmit="return false"&gt;test2 | Log Out &lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="container-fluid"&gt;
        &lt;button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"&gt;Toggle nav&lt;/button&gt;
        &lt;div class="row row-offcanvas row-offcanvas-left"&gt;
          &lt;div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation"&gt;
            &lt;div class="side-contain"&gt;
              &lt;div class="panel-heading head" role="tab" id="headingOne"&gt;
                &lt;h2 class="panel-title"&gt;My Account&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-10 content"&gt;
            &lt;div&gt;
              &lt;h1 class="main-head"&gt;User&lt;/h1&gt;
              &lt;p class="lead"&gt;Placeholder
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;
      &lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the <a href="https://jsfiddle.net/h3fsu8s2/" rel="nofollow">JsFiddle</a></p>