JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<select class="customSurah" id="surah" name="surah">
  <option value=""></option>
  <option value="1">Al-Faatiha</option>
  <option value="2">Al-Baqara</option>
  <option value="3">Aal-i-Imraan</option>
  <option value="4">An-Nisaa</option>
  <option value="5">Al-Maaida</option>
  <option value="6">Al-An'aam</option>
  <option value="7">Al-A'raaf</option>
  <option value="8">Al-Anfaal</option>
  <option value="9">At-Tawba</option>
  <option value="10">Yunus</option>
  <option value="11">Hud</option>
  <option value="12">Yusuf</option>
  <option value="13">Ar-Ra'd</option>
  <option value="14">Ibrahim</option>
  <option value="15">Al-Hijr</option>
  <option value="16">An-Nahl</option>
  <option value="17">Al-Israa</option>
  <option value="18">Al-Kahf</option>
  <option value="19">Maryam</option>
  <option value="20">Taa-Haa</option>
  <option value="21">Al-Anbiyaa</option>
  <option value="22">Al-Hajj</option>
  <option value="23">Al-Muminoon</option>
  <option value="24">An-Noor</option>
  <option value="25">Al-Furqaan</option>
  <option value="26">Ash-Shu'araa</option>
  <option value="27">An-Naml</option>
  <option value="28">Al-Qasas</option>
  <option value="29">Al-Ankaboot</option>
  <option value="30">Ar-Room</option>
  <option value="31">Luqman</option>
  <option value="32">As-Sajda</option>
  <option value="33">Al-Ahzaab</option>
  <option value="34">Saba</option>
  <option value="35">Faatir</option>
  <option value="36">Yaseen</option>
  <option value="37">As-Saaffaat</option>
  <option value="38">Saad</option>
  <option value="39">Az-Zumar</option>
  <option value="40">Al-Ghaafir</option>
  <option value="41">Fussilat</option>
  <option value="42">Ash-Shura</option>
  <option value="43">Az-Zukhruf</option>
  <option value="44">Ad-Dukhaan</option>
  <option value="45">Al-Jaathiya</option>
  <option value="46">Al-Ahqaf</option>
  <option value="47">Muhammad</option>
  <option value="48">Al-Fath</option>
  <option value="49">Al-Hujuraat</option>
  <option...

CSS

#demo-1 {
  color: black;
  font-size: 28px;
  direction: rtl;
  max-width: 50%;
  padding: 30px;
  margin: 0 auto;
  text-align: right;
}

JavaScript

$.ajaxSetup({
    cache: true,
    jsonpCallback: 'quranData'
  }); // define ajax setup
$("#surah").on("change", function () {
  $.getJSON("https://api.globalquran.com/surah/" + $(this).val() + "/quran-simple?key=api_key&jsoncallback=?", {
    format: "jsonp"
  }, function(data) {
    $.each(data.quran, function(i, by) {
      $.each(by, function(verseNo, line) {
        // $("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#demo-1");
        $("<span>").html(line.verse + '&nbsp;(' + line.surah + ':' + line.ayah + ') &nbsp; ').appendTo("#demo-1");
      });
    });
  });
});