I append my elements using the for loop. 

```
for ( i = 0; i < 28; i++ ) {
  var $sound = '<nav class="cell"><a class="pointer blacktxt" data-asound="'+ i +'"><i class="fa fa-volume-up"></i></a></nav>'
  var $csound = '<nav class="cell"><input type="text" class="txtcenter" data-csound="'+ i +'" placeholder="'+ i +'" /></nav>'
  var $newDiv = $('<header class="table lessonSec" data-alphabet="'+ i +'"/>').html($sound + $csound)
  $(".lesson").append( $newDiv )
}

```

Because I use the for loop to append my elements from 0-28; I would like to add the letters from the string in order as a new data-attribute in the for loop. 

**NOTE:** The Arabic alphabet has 28 letters and it's a cursive language written from right to left.

```
var char = "ابتثجحخدذرزسشصضطظعغفقكلمنهوي";

```

Here's an example of how I want the elements to be dynamically appended.

I've been working on this for hours and I have no idea how to proceed with doing something like this.

Does anyone know how to do this and can walk me through it? 

```js
$("body").append('<div class="lesson blacktxt"></div>')

var char = "ابتثجحخدذرزسشصضطظعغفقكلمنهوي";

for ( i = 0; i < 28; i++ ) {
  var $sound = '<a class="pointer" data-asound="'+ i +'"><i class="fa fa-volume-up"></i></a>'
  var $csound = '<input type="text" class="wauto" data-csound="'+ i +'" placeholder="'+ i +'" />'
  var $newDiv = $('<p class="lessonSec" data-alphabet="'+ i +'"/>').html($sound + $csound)
  $(".lesson").append( $newDiv )
}
```

```css
body {
  background: #7fb8ff;
}

/* Global Misc Classes */
.pointer {
  cursor: pointer;
  padding: 20%;
}

.wauto {
  width: auto;
  display: inline-block;
}
```

```html
<link href="http://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css" rel="stylesheet"/>
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
```