How to add values against each jquery emoticons

Question

I have a feedback form and for that i am using JQuery Feedback Library . Each smiley contains some value For example 'angry', 'disappointed', 'meh', 'happy', 'laughing'

there is some value for each smiley that is

angry = unsatisfactory
laughing = excellent

this is all working fine but what i want is to show value on form for example.

on bottom of first smiley it displays Unsatisfactory

on bottom of second smiley it displays Bad

on bottom of fifth smiley it displays excellent.

var emotionsArray = ['angry', 'disappointed', 'meh', 'happy', 'laughing'];

$('.SmileyRating').each(function() {
  var name = $(this).data('name');
  $(this).emotionsRating({
    emotionSize: 35,
    inputName: name,
    bgEmotion: 'happy',
    emotions: emotionsArray,
    color: '#FF0066', //the color must be expressed with a css code
    disabled: false, //set if the rating can be changed or not, default is falseS ME
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Emoji-Rating-Plugin-jQuery-Emotion-Ratings/emotion-ratings.js"></script>

<div class="w3layouts_main wrap">
  <h1 class="agile_head text-center" style="color:lime">Feedback</h1>
  <form action="#" method="post" class="agile_form">
    <h1 style="color: white; font-size: large">1. Quality of Service. </h1>
    <h2 style="color : #0086ce">How satisfied were you with our Service?</h2>
    <span class="SmileyRating" data-name="QualityOfService">
       </span>
    <br />
    <h1 style="color: white; font-size: large">2. Quality of Food. </h1>
    <h2 style="color : #0086ce">How satisfied were you with our Food?</h2>
    <span class="SmileyRating" data-name="QualityOfFood">
        </span>
    <br />
    <h1 style="color: white; font-size: large">3. Cleanliness of Lounge. </h1>
    <h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge Cleaning?</h2>
    <span class="SmileyRating" data-name="CleanlinessOfLounge">
            </span>
    <br />
    <h1 style="color: white; font-size: large">4. Friendliness of Staff </h1>
    <h2 style="color : #0086ce">How satisfied were you with our Staff?</h2>
    <span class="SmileyRating" data-name="FriendlinessOfStaff">
            </span>
    <br />
    <h1 style="color: white; font-size: large">5. Overall experience. </h1>
    <h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge?</h2>
    <span class="SmileyRating" data-name="OverAllExperience">
             
            </span>
    <br />
    <h3 style="color: white; font-size: large">Valuable Suggestions.</h3>
    <textarea placeholder="Additional comments" class="w3l_summary" name="Comments"></textarea>
    <input type="submit" value="Submit" class="agileinfo" style=" background-color:white; color: #e60053 " onmouseover=" this.style.backgroundColor = '#e60053', this.style.color = 'white' " onmouseout="    this.style.backgroundColor = 'white',   this.style.color = '#e60053'"
    />

  </form>
</div>

Answer 1

Is this the kind of behaviour you'd like ?
(Like in your snippet, I don't know why only the last shows correctly the icons, but tell me anwyay…)

var emotionsArray = ['angry', 'disappointed', 'meh', 'happy', 'laughing'];

$('.SmileyRating').each(function() {
  var name = $(this).data('name');
  $(this).emotionsRating({
    emotionSize: 35,
    inputName: name,
    bgEmotion: 'happy',
    emotions: emotionsArray,
    color: '#FF0066', //the color must be expressed with a css code
    disabled: false, //set if the rating can be changed or not, default is false
  });
});


$('.emotion-style').on('click', function(e) {
  value = $(this).data('index');
  // Remove the current .emotion-text, if exists
  $(this).closest('.emotion-container').find('.emotion-text').remove();
  // Add the emotion-text as a span
  $(this).closest('.emotion-container').append('<span class="emotion-text">' + emotionsArray[value] + '</span>');
});

body {
  background: #aaa;
}

.agileinfo {
  background-color: white;
  color: #e60053
}

.agileinfo:hover {
  background-color: #e60053;
  color: white;
}

/* Added the below to stylize the class added by the JS code */
.emotion-text{
  margin: 0 16px;
  color: #e60053
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Emoji-Rating-Plugin-jQuery-Emotion-Ratings/emotion-ratings.js"></script>

<div class="w3layouts_main wrap">
  <h1 class="agile_head text-center" style="color:lime">Feedback</h1>
  <form action="#" method="post" class="agile_form">
    <h1 style="color: white; font-size: large">1. Quality of Service. </h1>
    <h2 style="color : #0086ce">How satisfied were you with our Service?</h2>
    <span class="SmileyRating" data-name="QualityOfService"></span>
    <br />
    <h1 style="color: white; font-size: large">2. Quality of Food. </h1>
    <h2 style="color : #0086ce">How satisfied were you with our Food?</h2>
    <span class="SmileyRating" data-name="QualityOfFood"></span>
    <br />
    <h1 style="color: white; font-size: large">3. Cleanliness of Lounge. </h1>
    <h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge Cleaning?</h2>
    <span class="SmileyRating" data-name="CleanlinessOfLounge"></span>
    <br />
    <h1 style="color: white; font-size: large">4. Friendliness of Staff </h1>
    <h2 style="color : #0086ce">How satisfied were you with our Staff?</h2>
    <span class="SmileyRating" data-name="FriendlinessOfStaff"></span>
    <br />
    <h1 style="color: white; font-size: large">5. Overall experience. </h1>
    <h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge?</h2>
    <span class="SmileyRating" data-name="OverAllExperience"></span>
    <br />
    <h3 style="color: white; font-size: large">Valuable Suggestions.</h3>
    <textarea placeholder="Additional comments" class="w3l_summary" name="Comments"></textarea>
    <input type="submit" value="Submit" class="agileinfo" />
  </form>
</div>

Hope it helps.