JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.linkexchanger.su/example_jquery/js/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.css">
<form name="form" action="action.php" method="post" onSubmit="return checkForm(this.form)" style="width:800px;">
<div class="well">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
    <thead>
    <tr>
      <td width="150">Учебное заведение</td>
      <td>Специальность, факультет, образование</td>
      <td width="120">Число, месяц, год начала учебы</td>
      <td width="120">Число, месяц, год окончания учебы</td>
      <td></td>
    </tr>
    </thead>
    <tbody id="osvita">
    <tr>
      <td><input style="width:92%" type="text" class="col1_1" name="name_zakl" id="name_zakl" size="36"/></td>
      <td><input style="width:95%" type="text" class="col2_2" name="name_sfo" size="77"/></td>
      <td>
            <input style="width:85%" type="text" class="date-pickS" name="name_poch" id="inputPoch"
                    pattern="\d{1,2}\.\d{1,2}\.\d{4}" size="7"
                    title="дд.мм.рррр!" required/>
      </td>
      <td>
            <input style="width:85%" type="text" class="date-pickE" name="name_end" id="inputEnd"
                    pattern="\d{1,2}\.\d{1,2}\.\d{4}" size="7"
                    title="дд.мм.рррр!" required/>
      </td>
      <td ><input type="Button" value="+" class="AddRowO" style="width:24px;"></td>
    </tr>
    </tbody>
  </table>
  <input type="hidden" value="0" id="counterO">
</div>
</form>

JavaScript

$(function(){
$('.col1_1').autocompleteArray([
                "Магадан",
                "Магас",
                "Магнитогорск",
                "Майкоп",
                "Муром",
                "Мценск",
                "Мыски",
                "Мытищи",
                "Мышкин"
                ],
    {
        selectFirst: false,
        delay: 300
    });
});

$("input[type='button'].AddRowO").live('click',
function() {
    var indexO = $(this).closest('tr').index();
    var $tr = $(this).closest('tr').clone(true);
    var $inputS = $tr.find('input.date-pickS');
    var $inputE = $tr.find('input.date-pickE');
    var $inputC1 = $tr.find('input.col1_1');
    var $inputC2 = $tr.find('input.col2_2');
    var cRow = document.getElementById('osvita').getElementsByTagName('tr');
    var index = cRow.length;
    var id_p = 'inputPoch' + index;
    var id_e = 'inputEnd' + index;
    var chNameZakl = 'name_zakl' + index;
    var chNameSfo = 'name_sfo' + index;
    var chNamePoch = 'name_poch' + index;
    var chNameEnd = 'name_end' + index;

    if (indexO > 0) {
        var rwsOS;
        objOS=document.getElementById('osvita');
        rwsOS=objOS.getElementsByTagName('TR');
        objOS.removeChild(rwsOS[rwsOS.length-1]);
    } else {
        $tr.find('input').val("");
        $tr.find('input.AddRowO').val("-");
        if(index<9){
        index++;
        $('input#counterO').val(index);
        $inputS.attr('id', id_p).data('index', index);
        $inputE.attr('id', id_e).data('index', index);
        $inputC1.attr('id', chNameZakl).data('index', index);
        $inputS.attr('name', chNamePoch).data('index', index);
        $inputE.attr('name', chNameEnd).data('index', index);
        $inputC1.attr('name', chNameZakl).data('index', index);
        $inputC2.attr('name', chNameSfo).data('index', index);
        $(this).closest('table').append($tr);
        
        $('.col1_1').each(function() {
                $(this).autocompleteArray([
               ...