I'm having struggle accomplishing this :

I want jQuery to grab class name of each icon and write it in each p element

HTML

```
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container-fluid">
    <div class="text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-1"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-2"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-3"></i></div>
                <p></p>
            </div>
        </div>
    </div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

```

jQuery

```
function idk() {
    var icon_class = $(".icon i").attr("class"),
        icon_container = $(".col-md-4"),
        icon_p = $('.col-md-4 p');
        icon_p.each(function(){
            icon_p.text(icon_class);
        })
};
$(document).ready(function () {
    idk();
});

```

JsFiddle

<https://jsfiddle.net/277gpp7r/2/>

This code only duplicates the first icon class name and writes it in all "p" elements instead grabbing the each class name, but this is not what I'm trying to accomplish.

I would appreciate any help, thanks in advance everyone!