How to add a unique id to first of kind

Question

ok. Building out a employee directory. At the top of the directory is the alphabet so you can click on a letter an arrive at the first person who has that letter as first letter of last name. How can i loop through the all of the employees and add an id of the letter to the first of each. I haven't built out the markup, yet, but for now it could be as simple as

<h3><span class="fname">Johnny</span><span class="lname">Willis</span></h3>
</div> ```

Where I would target the last name and add an ID to the card
I am pulling all of the content in from a hubspot hubdb.  Unsure if that is relevant, but wanted to add that.

I recommend you add the ids at the time the data is populated onto the page. Can you post your code for how you receive the data for display onto the page? — Scott Flodin, May 31 '19 at 22:24
The data will be coming through hubspot's hubdb. I will be using a for loop top go through the data. I can use hubl filters to sort the data. The way hubdb is structured it is not easy to assign an ID to the first person of that letter in the alphabet. the rows are not sortable on the backend. So if the first person you input Is John Wayne, he is going to always be the first person you see while looking at the database. If i have 500 rows, it would be more difficult for the person maintaining this database to look for the person and add the ID. Was hoping there was a way i can automate — billyoncetoldme, Jun 03 '19 at 18:17

score 0 · Answer 1 · answered May 31 '19 at 23:28

I think you don't need to add an ID to each of the last names from your list. If you just want to scroll down to the first item when clicking the alphabet index, try this:

HTML

<!-- A container for the alphabet letters -->
<div id="alphabet">
  <span id="letter-a">A</span>
  <span id="letter-b">B</span>
  <span id="letter-c">C</span>
  <span id="letter-d">D</span>
</div>

<!-- A container for each last name -->
<div id="employee-a" style="height:500px">
  <p>A</p>
  <p>Adams Mike</p>
  <p>Addison John</p>
  <p>Adkins Smith</p>
</div>
<div id="employee-b" style="height:500px">
  <p>B</p>
  <p>Bain Chris</p>
  <p>Barker Travis</p>
  <p>Banner Brock</p>
</div>
<div id="employee-c" style="height:500px">
  <p>C</p>
  <p>Carl Steve</p>
  <p>Carter Aaron</p>
  <p>Castle Vania</p>
</div>
<div id="employee-d" style="height:500px">
  <p>D</p>
  <p>Daenerys Targaryen</p>
  <p>Dale Denton</p>
  <p>Daniels Jack</p>
</div>

JAVASCRIPT

<script>
  // Wait until DOM is fully loaded
  $(document).ready(function() {
    // Get the ID name from the letter you clicked
    $('#alphabet > span').on('click', function() {
      // Pass this ID name to a variable
      var letter = $(this).attr('id');
      var goTo = letter.split('-').pop();
      // Use it to smooth scroll to the position of the first last name with the letter you clicked
      $('html, body').animate({
        scrollTop : $('#employee-' + goTo).offset().top
      }, 500);
    })
  });
</script>

Hope this helps.

Enjoy!

Thanks, but what i need to do is add an ID to the first person in that letter. In your above example, i would want to be like `
Adams MIke
`. the other Name starting with A would not need the id. — billyoncetoldme, Jun 03 '19 at 18:13

How to add a unique id to first of kind

1 Answers1