JSFiddle - React, Tailwind, and code Playground

by AbuNidal

HTML

<html lang="ar">
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="css/style.css" media="screen" rel="stylesheet" type="text/css"/>    
</head>
<body>
 
<div class="add">
      
      
     <div id="form-title" class="form-title">
          <h2>
               أضف شركتك</h2>
     </div>
      
      
     <form action="process_form.php" class="AddCompany ui-sortable-disabled" method="post"
     novalidate="" enctype="multipart/form-data">
           
           
          <div id="title" class="text_area">
               <label for="title">
                    اسم شركتك
               </label>
               <input type="text" name="title" id="title" required>
          </div>
           
           
          <div id="catid" class="catid">
               <label for="catid">
                    المحافظة و اللواء
               </label>
               <select id="catid" name="catid">
                        <option value="0" selected="selected">- حدد المحافظة -</option>
                        <option value="6">الدليل التجاري</option>
                        <option value="1">الزرقاء</option>
                        <option value="2">- - - الرصيفة</option>
                        <option value="3">- - - قصبة الزرقاء</option>
                        <option value="16">- - - الهاشمية</option>
                        <option value="17">- - - السخنة</option>
                        <option value="4">عمان</option>
                        <option value="18">- - - عمان الغربية</option>
                        <option value="19">- - - عمان الشرقية</option>
                        <option value="5">أربد</option>
                        <option value="7">البلقاء</option>
                        <option value="8">جرش</option>
                        <option value="9">الطفيلة</option>
                        <option value="10">عجلون</option>
                          <option value="11">العقبة</option>
                        <option...

CSS

body {
direction: rtl;
}
 
.AddCompany{
    width: 500px;
}
 div.selector,
div.checker span,
div.radio span,
div.uploader,
div.uploader span.action {
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
}

.selector,
.radio,
.checker,
.uploader,
.selector *,
.radio *,
.checker *,
.uploader * {
    margin: 0;
    padding: 0;
}

div.selector, div.selector.focus, div.selector.hover {
    background-position: -63px 1px;
    line-height: 33px;
    height: 33px;
}

div.selector span {
    height: 28px;
    line-height: 29px;
    padding: 3px 0 3px 6px;
}

div.selector select {
    top: 0px;
    right: 0px;
}

div.selector {
    margin-bottom: 20px;
    width: 100%;
}

div.selector select {
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    border: solid 1px #fff;
}

div.selector span {
    cursor: pointer;
}

div.selector span {
    color: #666;
    width: 100%;
    text-shadow: 0 1px 0 #fff;
}

div.selector.disabled span {
    color: #bbb;
}

.selector select:focus, .radio input:focus, .checker input:focus, uploader input:focus {
    outline: 0;
}

div.selector {
    position: relative;
    padding-right: 10px;
    overflow: hidden;
}

div.selector span {
    display: block;
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.selector select {
    position: absolute;
    opacity: 0;
    height: 33px;
    border: none;
    background: none;
}


div.checker input, div.radio input {
    margin: 0 !important;
    top: -1px;
}

div.selector {
    padding: 0 !important;
}

/** IE Hacks **/

div.selector {
    background: transparent url(../images/select-bg-ie.jpg) no-repeat left 0px scroll\9;
}

input {
    background: transparent url(../images/input-bg.jpg) repeat-x 0 0 scroll\9;
    height: 33 px\9;
}

textarea {
    background: transparent url(../images/textarea-bg.png) repeat-x 0 0 scroll\9;
    height: 132px;
}

.submit input {
   ...

JavaScript

$('#K2ExtraField_1').change(function() {
    $('#K2ExtraField_2').find('option').remove()
        if ($(this).val() == '1') {
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '1').text('قصبة عمان'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '2').text('ماركا'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '3').text('القويسمة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '4').text('الجامعة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '5').text('وادي السير'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '6').text('سحاب'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '7').text('الجيزة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '8').text('الموقر'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '9').text('ناعور'));
        }
        if ($(this).val() == '2') {
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '10').text('قصبة الزرقاء'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '11').text('الرصيفة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '12').text('الهاشمية'));
        }
        if ($(this).val() == '3') {
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '17').text('قصبة اربد'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '18').text('الرمثا'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '19').text('الكورة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '20').text('بني كنان'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '21').text('الاغوار الشمالية'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '22').text('بني عبيد'));
       ...