title: Appending elements to div depending on JSON data
body: <p>I have a local JSON file that contains "Course Categories" and "Titles". Each Category has many Titles and each Title corresponds with one Category.</p>
  
  <p>I've created <a href="https://i.stack.imgur.com/2BnMu.png" rel="noreferrer">three separate divs</a>: "Top Courses", "Newly-Added Courses", and finally "Top Courses", and the divs are populated by Categories. Clicking on a Category opens a modal that shows the Category name a second time and the correct Category description. It's supposed to show all of the Titles that are associated with that Category, e.g. Clicking on the Category "Animals" should show "Chinchilla", "Axolotl", "Flea", etc.</p>
  
  <p><strong>I want to make it so that clicking on a Category <em>only</em> shows the Titles that are associated with that Category.</strong> I am seeing Titles in the modal---however <a href="https://i.stack.imgur.com/gsEkP.png" rel="noreferrer">I'm only seeing one Title</a> from each Category. Based on the order of the Titles I believe they're coming from the "All Courses" Category. I can't say if it's this way for sure, but when I click on a Category that is <em>not</em> under "All" I see the same thing.</p>
  
  <h3>JS Snippet:</h3>
  
  <pre><code>var testjson = {
    "d": {
      "results": [{
        "Title": "Aardvark",
        "Category": "Animals",
        "Description": "a-desc",
        "TopTrainingCourse": false,
        "ID": 1,
        "Modified": "2019-03-05T20:13:46Z",
        "Created": "2019-03-05T20:13:36Z"
      }, {
        "Title": "Red Panda",
        "Category": "Animals",
        "Description": "a-desc",
        "TopTrainingCourse": true,
        "ID": 10,
        "Modified": "2019-03-06T21:08:25Z",
        "Created": "2019-03-06T21:08:25Z"
      }, {
        "Title": "Tennis",
        "Category": "Sports",
        "Description": "s-desc",
        "TopTrainingCourse": true,
        "ID": 11,
        "Modified": "2019-03-06T21:08:35Z",
        "Created": "2019-03-06T21:08:35Z"
      }]
    }
  }
  
  
  ///// From topCourses.js /////
  
  import testjson from './test.json';
  
  export default class {
      constructor() {
      }
  
      loadTopCourses() {
          let topCrs = testjson.d.results
              .filter(x =&gt; x.TopTrainingCourse === true)
              .filter((el, idx, self) =&gt; { // no duplicates
                  return (idx === self.map(el =&gt; el.Category).indexOf(el.Category))
              })
              .map(x =&gt; {
                  return {
                      "Category": x.Category,
                      "Description": x.Description,
                      "Title": x.Title
                  }
              });
  
          let curIndex = 0;
          $.each(topCrs, function(idx, val) {
              curIndex++; // this line must be here---if it's moved down the 1st col doesn't show
              let targetDiv = $("div.top-training-div &gt; div[col='" + curIndex + "']");
  
              let modalTrigger = $('&lt;div /&gt;', {
                  'class': 'categoryName',
                  'data-category': val.Category,
                  'data-target': '#modal-id',
                  'data-toggle': 'modal',
                  'text': val.Category
              });
  
              targetDiv.append(modalTrigger);
  
              if(curIndex == 4) {
                  curIndex = 0;
              }
          })
  
          $('.categoryName').click(function(val) {
              let cat = $(this).data('category');
              $('.modal-title').text(cat);
  
              // console.log($(this).data('category'));
  
              $(".category-desc").empty();
              var noDupeDescs = topCrs.filter(function(val) {
                  return val.Category == this;
              }, cat)
              .map(function(val) {
                  return val.Description;
              });
  
              $.each(noDupeDescs, function(idx, val) {
                  $(".category-desc").append(val + "&lt;br /&gt;")
              })
  
              ///
  
              $(".training-titles").empty();
              let titles = topCrs;
  
  
  
          $.each(titles, function(idx, val) { // ----- thought something like this could help
              for (var i = 0; i = titles.length; i++) {
                  if $(titles.contains(val.Title)
                  $(".training-titles").append("&lt;li&gt;" + val.Title + "&lt;/li&gt;")
              }
          }
        });
  
      } // ------------------ loadTopCourses
  
  }
  </code></pre>
  
  <h3>Modal:</h3>
  
  <pre><code>&lt;div class="modal fade" id="modal-id" role="dialog" &gt;
       &lt;div class="modal-backdrop"&gt;
        &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title" id="exampleModalLabel"&gt;&lt;/h5&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                &lt;span aria-hidden="true"&gt;CLOSE&lt;/span&gt; &lt;!-- &amp;times; --&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="category-desc"&gt;&lt;/div&gt;
              &lt;ul class="training-titles"&gt;&lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt; &lt;!-- modal-backdrop --&gt;
      &lt;/div&gt; &lt;!-- modal fade --&gt;
  </code></pre>
  
  <ul>
  <li><p><a href="https://jsfiddle.net/sqo862ga/" rel="noreferrer">newCourses.js fiddle</a></p></li>
  <li><p><a href="https://jsfiddle.net/3dzs2oe7/" rel="noreferrer">allCourses.js fiddle</a></p></li>
  </ul>