Question: The problem I am trying to solve. 
I want to use jQuery to dynamically add content to a div depending on which class is being used. I am not sure why the alerts aren't working. It could be my html or the jquery itself. I want to solve this so that I can have different text appear depending on which class shows up.

Here is the HTML

```
<td>
    <div class="po size3"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

<td>
    <div class="po size4"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

<td>
    <div class="po size5"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

```

Here is the jQuery

```
$(document).ready(function() {
    if ($(this).hasClass("size5")) {
        $("div.p-accessible-alt").html("<p> Blah Blah Size5</p>");
    } else if  
        ($(this).hasClass("size4")) {
        alert('TEST!!!');
        $("div.p-accessible-alt").html("<p> Blah Blah Size4</p>");
    } else if  
    ($(this).hasClass("size3")) {
        alert('TEST 3!!!');
        $("div.p-accessible-alt").html("<p> Blah Blah Size3</p>");
    }
});

```

Answer: 
Your usage of `$(this)` won't work because you haven't made a selection. In JQuery `this` is always bound to the context the previous selector or method, it's a JQuery object containing the results of the selection or filter. Additionally, your selector for finding the child element to insert HTML into is too broad.

```
$("div.p-accessible-alt").html("<p> Blah Blah Size3</p>");

```

It will select every single `<div>` with a class of `p-accessible-alt` and insert the same HTML block into all of them.

You can replace your entire if block with the following selectors (one for each size).

```
$(".size3").siblings(".p-accessible-alt").html("<p> Blah Blah Size3</p>");
$(".size4").siblings(".p-accessible-alt").html("<p> Blah Blah Size4</p>");
$(".size5").siblings(".p-accessible-alt").html("<p> Blah Blah Size5</p>");

```

This works by finding the element with the class `.sizeX` and then traverses up to it's parent container, then back down the hierarchy to find it's descendant with the class `.p-accessible-alt` and then apply the html to that.
here is little more generic solution with some suggestions:

* Use classes only for CSS or JavaScript and [prefix your JavaScript-classes with "js-"](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
* I would choose a generic approach. So you can add or delete items without changing your JavaScript-code all the time. And in this case it would be a good idea to use an attribute to store item data instead of adding it to the classes

```js
$('.js-add-size').each(function() {
  var jThis = $(this);
  var itemHtml = 'Blah Blah ' + jThis.attr('data-size');
  jThis.find('.js-size-item').html(itemHtml);
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="js-add-size" data-size="size3">
      <div class="po"></div>
      <a class="external">Find your doctor</a>
      <div class="p-accessible-alt js-size-item"></div>
    </td>

    <td class="js-add-size" data-size="size4">
      <div class="po"></div>
      <a class="external">Find your doctor</a>
      <div class="p-accessible-alt js-size-item"></div>
    </td>

    <td class="js-add-size" data-size="size5">
      <div class="po"></div>
      <a class="external">Find your doctor</a>
      <div class="p-accessible-alt js-size-item"></div>
    </td>
  </tr>
</table>
```

And one last thing. Maybe you wanne be even more flexible and use some little template engine, like [mustache](https://github.com/janl/mustache.js/), instead of doing things like: 

```
var itemHtml = 'Blah Blah ' + jThis.attr('data-size');

```