arkb.snippet.html

            <div class="layout-one" id="layout-one">
                <input type="button" id="letter" name="dod" onclick="letter('1590')" value="ض"/>                
                <input type="button" id="letter" name="sod" onclick="letter('1589')" value="ص"/>
                <input type="button" id="letter" name="tha" onclick="letter('1579')" value="ث"/>                
                <input type="button" id="letter" name="kaf" onclick="letter('1602')" value="ق"/> 
                <input type="button" id="letter" name="fa" onclick="letter('1601')" value="ف"/>
                <input type="button" id="letter" name="ghayn" onclick="letter('1594')" value="غ"/>
              ....
            </div>
            <script>
                function letter(symbol) {
                var letter = String.fromCharCode(symbol);
                document.getElementById('text').value += letter;
            }
            </script>

So, then another javascript function, which is not shown here accepts value of input text and handle every letter giving it one of the forms: nice, initial, medial, final and after that returns string as input text value.