<body>
  <!--<header>
    <h1>ルーレット用ベット計算機</h1>
    <h2>Roulette betting calculator</h2>  
  </header>-->
  <div class="nav">
    <div class="navForm">
      <nav>
        <ul>
          <li><div><a href="#contents"><i class="fa-solid fa-caret-up"></i></a></div></li>
          <li class="bottom"><div><a href="#Enter"><i class="fa-solid fa-caret-down"></i></a></div></li>
          <li class="Select"><span>Jump to Number</span><input type="number" name="jumNum" min="1" step="1" autofocus></input><div class="scorp"><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></div></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="asideFix">
    <div class="asideForm">
      <!--hanburgerButton-->
      <input id="hanb" type="checkbox">
      <div class="footer-close"><label for="hanb" class="footer-close-button"><span></span></label></div>
      <!--hanburgerButton-->
      <div class="EnterBotton">
        <i class="fa-solid fa-file-circle-plus"></i>
      </div>
      <aside>
        <div class="fx">
          <div class="top"><div>ベットするコイン数</div><input class="coin" name="Coin" placeholder="100 (半角) コインCoin" type="number" min="1" step="1"></div>
          <p class="Start"><label><i class="fa-solid fa-calculator"></i><br><input type="submit" name="submit" value="Start"></label></p>
          <p class="BS"><label><i class="fa-solid fa-delete-left"></i><br><input type="reset" name="OneReset" value="Back Row"></label></p>
          <p class="AR"><label><i class="fa-solid fa-trash-can"></i><br><input type="reset" name="Reset" value="All Reset"></label></p>
        </div>
        <div class="result">
          <div class="h3"><strong>結果</strong><small>Result</small></div>
          <div class="error hidden">未入力あり<br><small>There is no input</small></div>
          <div class="response">
            <p><i class="fa-solid fa-coins"></i>ベットする番号<br></p>
            <table class="Bet">
              <tr style="height:30px;">
                <th>No.</th>
                <td class="witdh" style="font-size: 5%; opacity: 0.5;">to bet</td>
                <th>確率P</th>
                <td class="witdh" style="font-size: 5%; opacity: 0.5;">probability</td>
              </tr>
            </table>
            <p><small>※確率が一番高い番号に全ベットがベスト(上順)</small></p>
          </div>
          <div class="forScrollLast">
            <p><i class="fa-solid fa-coins"></i>期待値</p>
            <div class="SR"><span style="font-size: 5%; opacity: 0.5;">expected value</span></div>
            <p><small>※予想される利益</small></p>
          </div>
        </div>
      </aside>
    </div>
  </div>
  <div id="contents">
    <main>
      <table>
        <caption>
          <strong>数値入力欄</strong>
          <ol>
            <li>番号…<small>ルーレットに書かれている番号。ベットする番号になります。</small></li>
            <li>倍率…<small>ゲームによって決められている配当を入れます。</small></li>
            <li>合計…<small>ルーレットに書かれている同じ番号の合計数を入れます。</small></li>
          </ol>
        </caption>
        <thead id="tableTop">
          <tr>
            <th scope="col" abbr="番号 Num">番号<br><small>Number</small></th>
            <th scope="col" abbr="倍率 X">配当される倍率<br><small>Winning magnification</small></th>
            <th scope="col" abbr="数 Sum">同じ番号の合計<br><small>Sum of same number</small></th>
          </tr>
        </thead>
        <tbody id="input">
          <tr id="i1">
            <td><input class="n1" name="Number" autofocus placeholder="1 (半角) 番号Num" type="number" min="1" step="1"></input></td>
            <td><input class="t1" name="Time" placeholder="2 (半角) 倍率Times" type="number" min="1" step="1"></td>
            <td><input class="s1" name="Sum" placeholder="10 (半角) 合計Sum" type="number" min="1" step="1"></td>           
          </tr>
        </tbody>
      </table>
      <div class="Enter">
        <div id="Enter"><i class="fa-solid fa-file-circle-plus"></i></div>
      </div>
    </main>
  </div>
  <footer>
    <p><small>Writen by Yusuke M</small></p>
    <a class="arrow" href="#"><i class="fa-solid fa-circle-up"></i></a>
    <input type="text" name="Memo" value="1" id="Memo" class="hidden">
  </footer>
</body>
/*予約属性*/
.hidden{
  display: none;
}
.red {
  background: #ffbfbf;
}
.active {
  transition: .2s ease-in-out;
  transform: scale(0.7);
}
/*ForResponsivl*/
.footer-close, .EnterBotton {
    display: none;
 }
/*本文スタイル*/
body {
  margin: 0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-image: url(https://drive.google.com/uc?export=view&id=19r0GnicW0knrYncp0j7bsupQ7cAuHvl-);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
/*header*/
header {
  margin: 0 auto;
  width: 840px;
  padding: 25px 0 5px 0;
  text-align: center;
  background-image: linear-gradient(0deg, #8b0000, #b22222 10%, #f08080 50%);
}
header h1{
  margin: 0;
  color: #ffffff;
  text-shadow: 2px 2px 0 #000;
}
header h2 {
  margin: 0;
  font-style: italic;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  color: #ffffff;
  text-shadow: 2px 2px 0 #000;
}
/*nav*/
.nav {
  z-index: 50;
  width: 100%;
}
.navForm {
  margin: 0 auto;
  width: 840px;
}
.navForm {
  position: relative;
  top: 0;
  left: 0;
}
.nav.fix {
  position: fixed;
  left: 0;
  top: 0;
}
nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0; 
  list-style-type: none;
}
nav ul li, nav ul li.Select {
  text-align: center;
  vertical-align: middle;
  float: left;
  width: 200px;
  height: 30px;
  background: #a8aab8;
  border: 5px ridge #303030;
}
nav ul li.Select {
  width: 410px;
}
nav ul li.Select input {
  margin: 0 5px;
  padding: 0;
}
nav ul li a {
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  display: inline-block;
  padding: 0;
}
nav ul li a:hover {
  color: #000000;
}
nav ul li.Select .scorp {
  display: inline;
}
/*main*/
#contents {
  overflow: hidden;
  margin: 0 auto;
  width: 840px;
}
main {
  text-align: center;
  float: left;
  background-color: rgba(255, 255, 255, 0.8);
  width: 590px;
  margin: 0 auto;
}
main table caption ol {
  text-align: left;
}
main table caption{
  margin: 20px 0 20px 0;
}
main table {
  display: inline-block;
  border-collapse: collapse;
}
main table * {
  margin: 5px 0 0 0;
  line-height: 20px;
}
main table th, table td {
  padding: 5px;
  border: 1px solid #000000;
}
main table td i {
  margin: 0 5px 0 0;
}
main table th {
  font-size: 13px;
  line-height: 10px;
  padding: 5px 0 0 0;
  background: #ffbba9;
  z-index: 1;
}
main .Enter {
  position: relative;
  text-align: right;
  margin: -20px 0 20 0;
  padding: 0;
}
main #Enter {
  color: blue;
  display: block;
  position: absolute;
  right: 0;
  bottom: 5px;
  margin: 0;
  opacity: 0.3;
}
main #Enter:hover {
  opacity: 1;
}
/*aside*/
.asideFix {
  width: 100%;
}
.asideFix.fix {
  position: sticky;
  right: 0;
}
.asideForm {
  position: relative;
  top: 0;
  right: 0;
  margin: 0 auto;
  width: 840px;
}
aside {
  position: absolute;/*ページに固定*/
  top: 0;
  right: 0;
  height: 1080px;
  width: 230px;
}
aside p, aside h3, aside h4 {
  margin: 5px 10px;
}
aside label {
  float: left;
  font-size: 200%;
  text-align: center;
}
aside p.Start label {
  width: 28%;
}
aside p.BS label {
  width: 37%;
}
aside p.AR label {
  width: 35%;
}
aside label:hover{
  opacity: 0.5;
}
aside label input {
  font-size: 40%;
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
aside .fx {
  height: 120px;
  background-color: rgba(255, 255, 255, 0.8);
}
aside .result {
  border-top: 5px double #000000; 
  overflow: hidden auto;
  margin: 0;
  witdh: 90%;
  clear: both;
  padding: 0 0 0 5px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.8);
}
aside .result::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}
aside .result::-webkit-scrollbar {
  width: 10px;
	background-color: #F5F5F5;
}
aside .result::-webkit-scrollbar-thumb {
  background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}
aside .result .forScrollLast {
  height: 300px;
}
aside .result .error {
  font-weight: bold;
  color: red;
}
aside .result i {
  padding: 0 5px 0 5px;
}
aside .result p small {
  display: inline-block;
  width: 180px;
  padding-left: 18px;
  text-indent: -13px;
}
aside .result .h3 {
  padding: 5px 0 0 0;
}
aside .result table {
  border-collapse: collapse;
  width: 90%;
  margin-left: 5%;
  height: 30px;
}
aside .result table th, aside .result table td {
  padding: 0;
  text-align: center;
  border: 1px solid #000000;
}
aside .result table th {
  background: #ffbba9;
}
aside .SR {
  border: 1px solid #000000;
  height: 30px;
  width: 150px;
  margin-left: 5%;
  padding-left: 5px;
}
aside .top {
  margin-left: 5%;
}
aside .response .Bet .witdh {
  width: 40px;
  margin: 0 auto;
  padding: 0 5px;
}
aside .response .Bet th {
  font-size: 10%;
  width: 20%;
}
/*footer*/
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 50;
}
footer p {
  height: 20px;
  background-color: hsl(220, 50%,40%);
  text-align: center;
  width: 100%;
  margin: 2px auto;
  font-size: 5px;
  color: #ffffff;
  margin: 0;
  padding: 0;
  transition: .2s ease-in-out;
}
footer p small {
  width: 80%;
  margin: 0 auto;
}
footer a.arrow {
  opacity: 0.5;
  font-size: 300%;
  color: #6497ff;
  position: fixed;
	bottom: 25px;
	right: 20px;
	text-align: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: .2s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
	display: block;
}
footer a.arrow:hover {
  opacity: 1;
}
/*2画面スマホ用-840-590px>>*/
@media screen and (max-width: 840px){
  * {
	  float: none;
	  position: static;
  }
  img {
   max-width: 100%;
	 height: auto;
  }
  header {
    width: 95%;
  }
  header {
    font-size: 70%;
    padding: 2%;
  }
  /*nav*/
  .navForm {
    width: 100%;
  }
  nav {
    position: absolute;
    top: 0;
    left: 0;
  }
  nav ul li {
    background: radial-gradient(#800000, #b22222);
    border: none;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 20px;
    float: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    opacity: 0.5;
    text-shadow: 1px 1px 3px #000000;
    border: 4px outset #8b0000;
    box-sizing: border-box;
  }
  nav ul li i {
    margin-bottom: 15px;
  }
  nav ul li:hover {
    opacity: 1;
  }
  nav ul li.Select {
    display: none;
  }
  /*main*/
  #contents {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
  }
  main {
    width: 95%;
    padding: 10px;
  }
  main table {
    marign: 0 auto;
    width: 100%;
    overflow-x: scroll; 
  }
  /*hanb*/
  .asideForm {
    width: 100%;
  }
  .footer-close, .EnterBotton {
    display: block;
  }
  main #Enter {
    visibility: hidden;
  }
  aside {
    transition: .5s ease-out;
    height: 300px;
    position: absolute;
    top: 0;
    transform-origin: 255px 0 0;
    transform: rotateY(90deg);
  }  
  aside .fx, aside .result{
    background: #ffffff;
  }
  aside .forScroll {
    display: none;
  }
  #hanb:checked ~ aside {
    transition: .5s ease-out;
    right: 0px;
  }
  #hanb ~ .footer-close, #hanb ~ .EnterBotton  {
    transition: .5s ease-out;
    opacity: 0.5;
  }
  #hanb:checked ~ .footer-close, #hanb:checked ~ .EnterBotton {
    transition: .5s ease-out;
    right: 228px;
    opacity: 1;
  }
  #hanb:checked ~ aside {
    transform: rotateY(0deg);
  }
  /*footer*/
  footer a.arrow {
    display: none;
  }
  footer p {
    font-size: 10px;
  }
  /*余白チェック*/
}
/*ForHanburgerButton*/
#hanb{
  display: none;
}
.footer-close, .EnterBotton {
  z-index: 150;
  text-shadow: 2px 2px 2px #696969;
  position: absolute;/*ページに固定*/
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: #800000;/*ボックス背景色*/
	color:#fff;/*文字色*/
  text-align: center;
  z-index: 100;
  border: 4px outset #8b0000;
}
.EnterBotton {
  font-size: 30px;
  top: 60px;
  opacity: 0.5;
}
.EnterBotton:active {
  opacity: 1;
}
.footer-close:after{
  position: relative;
  bottom: 4px;/*テキスト下からの位置*/
  content: "open";
}
.footer-close-button{
  margin: 0 auto;
  width:30px;/*アイコンサイズ*/
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-close-button span, .footer-close-button span:before, .footer-close-button span:after {
  top: 10px;
  position: relative;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;/*アイコン色*/
  display: block;
  content: '';
  transition: all 0.5s ease-in-out;/*アニメーションの速さ*/
}
.footer-close-button span:before{
  top: -20px;
}
.footer-close-button span:after{
  top: -13px;
}
#hanb:checked ~ .footer-close .footer-close-button span:before{
  top: 0;
  transform: rotateZ(-90deg);
}
#hanb:checked ~ .footer-close .footer-close-button span{
  top: 0;
  transform: rotateZ(45deg) scale(0.8)/*大きさ変更*/;
}
#hanb:checked ~ .footer-close .footer-close-button span:after{
  top: 0;
  transform: rotateZ(-45deg) scale(0);
}
#hanb:checked ~ .footer-close:after{
  content: "close";
}
/*navを固定*/
/*https://nyanblog2222.com/programming/javascript/1630/*/
$(function() {
  let win_w = jQuery(window).width();
  var pos = $(".nav").offset().top;
  var height = $(".nav").outerHeight();
  $(window).scroll(function () {
    if ($(this).scrollTop() > pos) {
      $(".nav").addClass("fix");
      $(".asideFix").addClass("fix");
      $(".asideFix").css('top', height);
    } else {
      $(".nav").removeClass("fix");
      $(".asideFix").removeClass("fix");
    }
  });
});
/*JumpAction*/
$('input[name="jumNum"]').blur(function(){
  var jn = $('input[name="jumNum"]').val();
  var c = 1;
  var arrayN = [];
  let fin = $('input[name="Memo"]').val();
  fin = fin + 1;
  do {
    var n = $('#input input.n' + c).val();
    if(n === ""){n = 0;}
    arrayN.push(n);
    c = c + 1;
    if(n === jn){break;} else {continue;}
  } while(c <= fin); $('input[name="jumNum"]').removeClass('red');
  fin = $('input[name="Memo"]').val();
  fin = Number(fin);
  if(jn === ""){
    jn = '#';
    $('nav ul li.Select a').attr('href', '#');
  } else if(arrayN.length > fin) {
    jn = '#';
    $('nav ul li.Select a').attr('href', '#');
    $('input[name="jumNum"]').addClass('red');
  } else {
    jn = '#i' + arrayN.length;
    $('nav ul li.Select a').attr('href', jn);
  }
});
/*ClickAction*/
$('aside p.Start, aside p.BS, aside p.AR').click(function(){
  var obj = $(this);
  $(obj).children().addClass('active');
  setTimeout(function(){ $(obj).children().removeClass('active'); }, 100);
});
/*枠増設*/ 
$("main #Enter, .EnterBotton").click(function (e) {
  e.preventDefault();
  var tableSub = '<td><input name="Number" autofocus placeholder="1 (半角) 番号Num" type="number" min="1" step="1"></input></td><td><input name="Time" placeholder="2 (半角) 倍率Times" type="number" min="1" step="1"></td><td><input name="Sum" placeholder="10 (半角) 合計Sum" type="number" min="1" step="1"></td></tr>';
  var c = $('input[name="Memo"]').val();
  c = Number(c);
  var d = c + 1;
  $('#input tr#i' + c).parent().append('<tr id="i' + d + '"></tr>');
  
  c = c + 1;
  $('#input tr#i' + c).html(tableSub);
  $('#input tr#i' + c + ' input[name="Number"]').addClass('n' + c);
  $('#input tr#i' + c + ' input[name="Time"]').addClass('t' + c);
  $('#input tr#i' + c + ' input[name="Sum"]').addClass('s' + c);
  $('input[name="Memo"]').val(c);
});
/*Start*/
$('aside p.Start input').click(function(){
  //remove empt Maxcell
  let memoC = $('input[name="Memo"]').val();
  let checkN = $('#input input.n' + memoC).val();
  let checkT = $('#input input.t' + memoC).val();
  let checkS = $('#input input.s' + memoC).val();
  if (checkN.length <= 0 && checkT.length <= 0 && checkS.length <= 0) {
    $('#input').find('tr#i' + memoC).remove();
    memoC = memoC - 1;
    $('input[name="Memo"]').val(memoC);
  }
  var c = 1;
  var arrayN = [];
  var arrayT = [];
  var arrayS = [];
  let fin = $('input[name="Memo"]').val();
  $('aside .result .error').addClass('hidden');
  $('#input input.red').removeClass('red');
  $('aside input.coin').removeClass('red');
  $('aside .response .Bet').html('<tr style="height:30px;"><th>No.</th><td class="witdh" style="font-size: 5%; opacity: 0.5;">to bet</td><th>確率P</th><td class="witdh" style="font-size: 5%; opacity: 0.5;">probability</td></tr>');
  do {
    var n = $('#input input.n' + c).val();
    var t = $('#input input.t' + c).val();
    var s = $('#input input.s' + c).val();
    if(s !== ""){$('aside .response .Bet tr').addClass('hidden');}
    if(n === "" || t === "" || s === ""){$('aside .result .error').removeClass('hidden');}
    if(n === ""){n = 0; $('#input input.n' + c).addClass('red');}
    if(t === ""){t = 0; $('#input input.t' + c).addClass('red');}
    if(s === ""){s = 0; $('#input input.s' + c).addClass('red');}
    arrayN.push(n);
    arrayT.push(t);
    arrayS.push(s);
    c = c + 1;
  } while(c <= fin);
  /*計算*/
  var Sum = 0;
  for(var i = 0; i < arrayS.length; i = i + 1){
    var num = arrayS[i];
    num = Number(num);
    Sum = Sum + num;
  }
  
  var arraySPro = [];
  for(var i = 0; i < arrayS.length; i = i + 1){
    var num = arrayS[i];
    num = Number(num);
    var Pro = num / Sum;
    arraySPro.push(Pro);
  }
  
  var arrayExp = [];
  for(var i = 0; i < arrayT.length; i = i + 1){
    var numT = arrayT[i];
    numT = Number(numT);
    var Exp = numT * arraySPro[i];
    arrayExp.push(Exp);
  }
  
  var arrayMaxExp = [];
  var arrayMaxN = [];
  var arrayMaxSPro = [];
  var maxExp = Math.max.apply(null,arrayExp);
  for(var i = 0; i < arrayN.length; i = i + 1){
    var exp = arrayExp[i];
    var n = arrayN[i];
    var sp = arraySPro[i];
    exp = Number(exp);
    if(exp === maxExp){
      arrayMaxN.push(n);
      arrayMaxSPro.push(sp);
      arrayMaxExp.push(exp);
    } 
  }
  /*表示*/
  if($('aside input.coin').val() === ""){
    var coin = 0;
    $('aside input.coin').addClass('red');
    $('aside .result .error').removeClass('hidden');
  } else{
    var coin = $('aside input.coin').val();
    coin = Number(coin);
  }
  $('.result .SR').html(Math.round(maxExp * coin * 1000) / 1000);
  
  var opt = 1;
  do {
    for(var i = 0; i < arrayMaxSPro.length; i = i + 1){
      var maxP = Math.max.apply(null,arrayMaxSPro);
      var sP = arrayMaxSPro[i];
      var n = arrayMaxN[i];
      if(sP === maxP){
        sP = Math.round(sP * 1000) / 1000;
        $('aside .response table.Bet').append('<tr><th class="o">No.</th><td style="width: 40px;">' + n + '</td><th class="o">確率P</th><td style="width: 40px;">' + sP + '</td></tr>');
        arrayMaxN.splice( i, 1 );
        arrayMaxSPro.splice( i, 1 );
        break;
      } else {
        continue;
      }
    }
    $('aside .response .Bet th.o').attr('style','opacity: ' + opt + ';');
    $('aside .response .Bet th.o').removeClass('o');
    opt = opt / 2;
  } while (arrayMaxN.length > 0);
});
/*Back Row*/
$('aside p.BS input').click(function(){
  var bs = $('input[name="Memo"]').val();
  if(bs > 1){
    $('#input tr#i' + bs).remove();
    bs = bs - 1;
    $('input[name="Memo"]').val(bs);
  }
  //console.log(bs);
});
/*All Reset*/
$('aside p.AR input').click(function(){
  var ar = $('input[name="Memo"]').val();
  var htmlStr = '<tr id="i1"><td><input class="n1" name="Number" autofocus placeholder="1 (半角) 番号Num" type="number" min="1" step="1"></input></td><td><input class="t1" name="Time" placeholder="2 (半角) 倍率Times" type="number" min="1" step="1"></td><td><input class="s1" name="Sum" placeholder="10 (半角) 合計Sum" type="number" min="1" step="1"></td></tr>';
  if(ar !== 1){
    $('#input').html(htmlStr);
    ar = 1;
    $('input[name="Memo"]').val(ar);
  }
});
/*スクロールがあると一定時間後にfooter隠し*/
$(window).scroll(function () {
  $('footer p').css('display','block');
  setTimeout(function(){
    $('footer p').css('transform','translateY(0%)');
  }, 1);
  setTimeout(function(){
    $('footer p').css('transform','translateY(105%)')
  }, 3.0*1000);
  setTimeout(function(){
    $('footer p').css('display','none');
  }, 4.0*1000);
});
/*inputからフォーカスが離れたとき全角を半角に変換する関数
https://www.searchlight8.com/jquery-javaascript-replace-charcode/*/
$(function(){
  $("input").blur(function(){
    charChange($(this));
  });
  charChange = function(e){
    var val = e.val();
    var str = val.replace(/[A-Za-z0-9]/g,function(s){
      return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
    });
 
    if(val.match(/[A-Za-z0-9]/g)){
      $(e).val(str);
    }
  }
});
//枠自動
$('#input').click(function(){
  let tableMax = $('input[name="Memo"]').val()
  let $maxNV = $('#input').find('.n' + tableMax).val();
  let $maxTV = $('#input').find('.t' + tableMax).val();
  let $maxSV = $('#input').find('.s' + tableMax).val();
  if($maxNV.length || $maxTV.length || $maxSV.length) {
    var tableSub = '<td><input name="Number" autofocus placeholder="1 (半角) 番号Num" type="number" min="1" step="1"></input></td><td><input name="Time" placeholder="2 (半角) 倍率Times" type="number" min="1" step="1"></td><td><input name="Sum" placeholder="10 (半角) 合計Sum" type="number" min="1" step="1"></td></tr>';
    var c = $('input[name="Memo"]').val();
    c = Number(c);
    var d = c + 1;
    $('#input tr#i' + c).parent().append('<tr id="i' + d + '"></tr>');
  
    c = c + 1;
    $('#input tr#i' + c).html(tableSub);
    $('#input tr#i' + c + ' input[name="Number"]').addClass('n' + c);
    $('#input tr#i' + c + ' input[name="Time"]').addClass('t' + c);
    $('#input tr#i' + c + ' input[name="Sum"]').addClass('s' + c);
    $('input[name="Memo"]').val(c);
  }
})
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js