JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<div class="left-side">
  <button class="umn">Умножить матрицы</button>
  <br>
  <button class="clear-mtrx btn-style"><i class="fa fa-reply" aria-hidden="true"></i> Очистить матрицы</button>
  <button class="change-mtrx btn-style"><i class="fa fa-exchange" aria-hidden="true"></i>Поменять матрицы местами</button>
  <div class="add_mtrx">
    <span class="rad btn_a">
       <label for="matrix_a">
         <input checked="checked" name="mtrx_sel" type="radio" value="matrix_a" id="check_mtrx_a">Матрица А  
       </label>
     </span>
    <span class="rad btn_b">
       <label for="matrix_b">
         <input type="radio" name="mtrx_sel" value="matrix_b" id="check_mtrx_b">Матрица В
       </label>
     </span>
    <br>
    <div class="add_del_btns">
      <button class="add_str btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
      <button class="del_str btn-style" type="button"><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button> строку
      <br>
      <button class="add_col btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
      <button class="del_col btn-style" type="button" disabled><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button> столбец
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod impedit sint porro saepe, doloremque est!</p>
</div>
<div class="main_cover">

  <div class="matrix_c_cover">
    <table class="matrix_c brackets">

      <tr>
        <td class="str_inp">
          <input type="text" disabled placeholder="c1,1">
        </td>
        <td class="str_inp">
          <input type="text" disabled placeholder="c1,2">
        </td>
        <td class="str_inp">
          <input type="text" disabled placeholder="c1,3">
        </td>
      </tr>

      <tr>
        <td class="str_inp">
          <input type="text" disabled placeholder="c2,1">
        </td>
        <td class="str_inp">
          <input type="text"...

SCSS

html,body{
  height: 100%;
  margin: 0;
  padding: 0; 
}
body{
  font-family: 'SegoeUI-SemiBold';
  font-size: 14px;
  color: #404040;
  line-height: 20px;
  button{
    border-radius: 1px;
    border: 1px solid #d9d9d9;
    border-bottom: 1px solid #b2b2b2;
    background: -moz-linear-gradient(270deg, rgba(254,254,254,1) 0%, rgba(237,237,237,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254,254,254,1)), color-stop(100%, rgba(237,237,237,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(270deg, rgba(254,254,254,1) 0%, rgba(237,237,237,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(270deg, rgba(254,254,254,1) 0%, rgba(237,237,237,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(270deg, rgba(254,254,254,1) 0%, rgba(237,237,237,1) 100%); /* ie10+ */
    background: linear-gradient(180deg, rgba(254,254,254,1) 0%, rgba(237,237,237,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#ededed',GradientType=0 ); /* ie6-9 */
    &:active{
      background: #d9d9d9;
      border: 1px solid #cccccc;
      border-top: 1px solid #a6a6a6;
      -webkit-box-shadow: inset 0 2px 0px 0 rgb(209, 201, 201);
      -moz-box-shadow: inset 0 2px 0px 0 rgb(209, 201, 201);
      box-shadow: inset 0 2px 0px 0 rgb(209, 201, 201);
    }
    &:disabled{
      border:1px solid #d9d9d9;
      background: #f2f2f2;
    }
    &:hover{
      background: -moz-linear-gradient(270deg, rgba(242,242,242,1) 0%, rgba(223,223,223,1) 100%); /* ff3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(242,242,242,1)), color-stop(100%, rgba(223,223,223,1))); /* safari4+,chrome */
      background: -webkit-linear-gradient(270deg, rgba(242,242,242,1) 0%, rgba(223,223,223,1) 100%); /* safari5.1+,chrome10+ */
      background: -o-linear-gradient(270deg, rgba(242,242,242,1) 0%, rgba(223,223,223,1)...

JavaScript

////////////////////////////add functions

$(function() {

  //пользоват.фу-ция
  function placeHold() {
    matrix.find('tr').each(function(i, v) { //loop each row
      $(v).find('td').each(function(x, d) { //loop each colon in that row
        $(d).find('input').attr('placeholder', matrixID.split('_')[1] + (i + 1) + ',' + (x + 1));
      })
    })
  };


  // начальные значения
  var matrixID = $('input[name=mtrx_sel]:checked').val();
  var matrix = $('.' + matrixID);

  $('input[name=mtrx_sel]').on('change', function() {
    matrixID = $(this).val();
    matrix = $('.' + matrixID);
    checkAddStr();
    checkAddCol();
    checkDelStr();
    checkDelCol();
  });




  //обработка кнопок добавить
  $('.add_str').click(function() {
    matrix.find('tr:first').clone().appendTo(matrix);
    placeHold();
    checkAddStr();
    checkDelStr();
    add_height();
  });

  $('.add_col').click(function() {
    matrix.find('tr td:last').clone().appendTo(matrix.find('tr'));
    placeHold();
    checkAddCol();
    checkDelCol();
  });

  //проверка активности кнопки доб.стр.
  function checkAddStr() {
    if ($("input[value=" + matrixID + "]").prop("checked")) {
      if (matrix.find('tr').length >= 10) {
        $('.add_str').prop('disabled', true);
      } else {
        $('.add_str').prop('disabled', false);
      }
    }
  }


  //доб.колон.
  function checkAddCol() {
    if ($("input[value=" + matrixID + "]").prop("checked")) {
      if (matrix.find('tr:first td').length >= 10) {
        $('.add_col').prop('disabled', true);
      } else {
        $('.add_col').prop('disabled', false);
      }
    }
  }



  ////////////dell string and col  
  function checkDelStr() {
    if ($("input[value=" + matrixID + "]").prop("checked")) {
      if (matrix.find('tr').length <= 2) {
        $('.del_str').prop('disabled', true);
      } else {
        $('.del_str').prop('disabled', false);
      }
    }
  }

  function checkDelCol() {
    if ($("input[value=" + matrixID +...