How to clone typing to every input from the first box with jquery on checkbox checked (dynamically)?

Question

Referring to the solution of https://stackoverflow.com/a/46159513/1620626 with a big help from @osdavison.

Now I want the script to find it's child class or id without predefined it. All I thinking now is making a function. So I'd hope to do this.

JS

function cloneAllz(chkBoxID, clsName) {
  alert(chkBoxID + '/' + clsName);//test value
  var $input1 = $(document).find('#' + clsName).filter(':visible:first'); //find the first input begins with *box or other same id???
  $input1.keypress(function() { //duplicate the first box typing
    var $this = $(this);
    window.setTimeout(function() { //delay a bit
      if ($('#' + chkBoxID).is(':checked')) { //if checkbox empty
        $('*[id^="' + clsName + '"]').val($this.val()).attr('readonly', true); //clone all inputs and set them readonly
        $input1.attr('readonly', false);
      }
    }, 0);
  });
}

HTML

 1.
<input type="text" value="" id="box1" />
<label>
  <input type="checkbox" id="cloneAll" onChange="cloneAllz('cloneAll','box')" />clone all</label>
<br /> 2.
<input type="text" value="" id="box2" />
<br /> 3.
<input type="text" value="" id="box3" />
<br /> 4.
<input type="text" value="" id="box4" />
<br /> 5.
<input type="text" value="" id="box5" />
<br /> .
<br /> .
<br /> .
<br /> 100.
<input type="text" value="" id="box100" />
<br />

All I got from the console is Uncaught ReferenceError: cloneAllz is not defined

Fiddle here

Answer 1

After a night I head ached. This noon I come up with the working code. Thanks to those efforts and google. Fiddle

$(document).on('change', $('.clone'), function(el) {
  var $this = $(el.target);
  var $clss = $(el.target).attr('value'); //target class name
  var $master = $('.prdEdt').find('td.' + $clss + ' input[type="text"]').filter(':visible:first');
  var $tdVal = $('td.' + $clss + '>input[type="text"]');

  if ($this.is(':checked')) {
    $($tdVal).attr('readonly', 'true'); //set child readonly
    $master.attr('readonly', false); //exclude 1st input

    $master.on('input', function() {
      $($tdVal).val($(this).val());
      $tdVal.each(function() {
        console.log($(this).attr('id') + '/' + $(this).val());
        //call ajax
      });
    })
  } else {
    console.log('unchecked');
    $($tdVal).removeAttr('readonly');
  }
});

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
  <tr>
    <th>ID</th>
    <th>Code
      <label class="pull-right label label-default">
        <input type="checkbox" class="clone" value='cde' /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Title
      <label class="pull-right label label-default">
        <input type="checkbox" class="clone" value="tt_en"  /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>00067</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
    </td>
  </tr>
  <tr>
    <td>00068</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
    </td>
  </tr>
</table>

Answer 2

Firstly your fiddle is using jQuery 1.5.2 which is very outdated. You should update that ASAP.

Secondly you should use unobtrusive event handlers instead of event attributes in the HTML.

To fix your actual problem you can hook to the input event of the first input. Within that event handler you can inspect to see if the checkbox is checked, and if so se the val() of all other inputs to match that of the current one. Using this method will massively simplify your code which currently seems a little over-complicated. Try this:

$('.container .master').on('input', function() {
  var $container = $(this).closest('.container');
  if ($container.find('.cloneAll').is(':checked'))
    $container.find('input:not(.master)').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  1. <input type="text" value="" class="master" />
  <label>
    <input type="checkbox" class="cloneAll" />
    clone all
  </label><br /> 

  2. <input type="text" value="" id="box2" /><br /> 
  3. <input type="text" value="" id="box3" /><br /> 
  4. <input type="text" value="" id="box4" /><br /> 
  5. <input type="text" value="" id="box5" /><br /> 
  .<br /> .<br /> .<br /> 
  100. <input type="text" value="" id="box100" />
</div><br /><br />

<div class="container">
  1. <input type="text" value="" class="master" />
  <label>
    <input type="checkbox" class="cloneAll" />
    clone all
  </label><br /> 

  2. <input type="text" value="" id="box2" /><br /> 
  3. <input type="text" value="" id="box3" /><br /> 
  4. <input type="text" value="" id="box4" /><br /> 
  5. <input type="text" value="" id="box5" /><br /> 
  .<br /> .<br /> .<br /> 
  100. <input type="text" value="" id="box100" />
</div>