JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<button class="site-config-button">Настройки сайта 1</button>
<form class="site-config-form" method="post" title="Настройки сайта">
    Число: <input name="period" value="1" />
</form>

<button class="site-config-button">Настройки сайта 2</button>
<form class="site-config-form" method="post" title="Настройки сайта">
    Число: <input name="period" value="2" />
</form>

<button class="site-config-button">Настройки сайта 3</button>
<form class="site-config-form" method="post" title="Настройки сайта">
    Число: <input name="period" value="3" />
</form>

JavaScript

var $dialog;
$(function(){
  $('button.site-config-button').button().click(function() {
      var index = $(this).index();
      $('form.site-config-form:eq('+index+')').dialog('open');
  });
  $dialog = $('form.site-config-form').dialog({
    autoOpen: false,
    resizable: false,
    width: 500,
    modal: true,
    buttons: {
      "Сохранить": function() {
        $(this).submit();
      },
      "Отмена": function() {
        $(this).dialog("close");
      }
    }
  });
})