JQuery Verschiebung erzeugte Schaltfläche Wert in zirkular

Question

ich versuche, etwas Phantasie wie diese create button and shift values zu machen, so weit ich erreicht haben, bis hier FIDDLE

$("#submit").click(function() { 
    var n = $('#txtinp').val(); 
    if ($.isNumeric(n)) { 
     //alert(n); 
     var btns = $('#btns'); 
     for (var i = 1; i <= n; i++) { 
     btns.append('<input type="button" id="b' + i + '" value="' + i + '"/>'); 
     } 
    } else { 
     alert("enter a number"); 
    } 
    $("input[type='button']").click(function(e) { 
     var idClicked = e.target.id; 
     //alert($(this).attr("value")); 
     if (idClicked == 'b1' && $(this).attr("value") == 1) { 
     $(this).prop('value', n); 
     var lastBtn = 'b' + n; 
     for (var i = n; i > 1; i--) { 
      $('#b' + i).prop('value', i - 1); 
     } 
     } else { 
     var lastBtn = 'b' + n; 
     for (var i = n; i >= 1; i--) { 
      if ('b' + i == 'b1' && 'b' + n == n) { 
      $('#b' + i).prop('value', i); 
      } else { 
      $('#b' + i).prop('value', i - 1); 
      } 
     } 
     } 
    }); 

}); 

ich in der Lage bin nur einmal zu verschieben, wenn sehr geklickt zuerst erstellt Schaltfläche, aber die Funktion oder das Ereignis funktioniert nicht bei zweiten und weiteren Klicks. Ich habe keine vorherige Jquery Erfahrung, was mache ich hier falsch?

Bitte stimmen Sie nicht ab, wenn die Frage zu dumm ist. Dank im Voraus

Answer 1

Hier ist eine mögliche Lösung:

$(document).ready(function() { 
 
    $("#submit").click(function() { 
 
    var n = $('#txtinp').val(); 
 
    if ($.isNumeric(n)) { 
 
     var btns = $('#btns').empty(); 
 
     for (var i = 1; i <= n; i++) { 
 
     btns.append($('<button>').text(i)); 
 
     } 
 
    } else { 
 
     alert("enter a number"); 
 
    } 
 

 
    $("#btns button").click(function(e) { 
 
     var buttons = $('#btns button'); 
 
     buttons.each(function() { 
 
     var currentValue = parseInt($(this).text()); 
 
     var newValue = currentValue - 1; 
 
     if (newValue === 0) { 
 
      newValue = buttons.length; 
 
     } 
 
     $(this).text(newValue); 
 
     }); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="txtinp" /> 
 
<input type="button" id="submit" value="Submit" /> 
 
<div id="btns"> 
 

 
</div>