Populate multiple input fields with values from other fields

Question

I have three lines with four fields input of the kind time, and I want to create a button so that the two lines below can be filled equal to the first.

I’m following this reply from Soen, and adapted to take by classe instead of id, then I can already fill several fields from one, but I want, from a button, to provide the fill of the line below with the value of the other four of the line above (see image below).

The HTML of the lines:

    <label id="Cseg2" class="hora">Linha 1:</label>
    <label for="Cseg3">Entrada:</label>
    <input type="time" id="Cseg3" name="Tsegs">
    <label for="Cseg4">Saída:</label>
    <input type="time" id="Cseg4" name="Tsegss">
    <label for="Cseg5">Retorno:</label>
    <input type="time" id="Cseg5" name="Tsegsss">
    <label for="Cseg6">Saída:</label>
    <input type="time" id="Cseg6" name="Tsegssss">
    <br>
    <label id="Cter2" class="hora">Linha 2:</label>
    <label for="Cter3">Entrada:</label>
    <input type="time" id="Cter3" name="Tter">
    <label for="Cter4">Saída:</label>
    <input type="time" id="Cter4" name="Tters">
    <label for="Cter5">Retorno:</label>
    <input type="time" id="Cter5" name="Tterss">
    <label for="Cter6">Saída:</label>
    <input type="time" id="Cter6" name="Ttersss">
    <br>
    <label id="Cqua2" class="hora">Linha 3:</label>
    <label for="Cqua3">Entrada:</label>
    <input type="time" id="Cqua3" name="Tqua">
    <label for="Cqua4">Saída:</label>
    <input type="time" id="Cqua4" name="Tquas">
    <label for="Cqua5">Retorno:</label>
    <input type="time" id="Cqua5" name="Tquass">
    <label for="Cqua6">Saída:</label>
    <input type="time" id="Cqua6" name="Tquasss">
    <br>

For now I managed to get here by working on the Soen script:

var tags = [];

$(function() {
    
    $('#tagAdd').click(function(){
        //get the tag value and trim the spaces
        var tVal = $('#tagEntry').val().trim();
        if(tVal == '')
            return;
        
        //verify tag not already saved
        for(var i=0;i<tags.length;i++)
            if(tags[i] == tVal)
                return;
        
        //add the tag to the array
        tags.push(tVal);
        
        //set the tags entry box
        $('.tagsEntered').val(tags.join(', '));
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <strong>Enter your tag and click add</strong>
    <br/>
    <input type="time" id="tagEntry" />
    <button id="tagAdd">Add</button>
</div>

<div>
    <strong>Entered Tags</strong>
    <br/>
    <input type="time" class="tagsEntered"/>
</div>
    
<div>
    <strong>Entered Tags 2</strong>
    <br/>
    <input type="time" class="tagsEntered"/>
</div>
<div>
    <strong>Entered Tags3</strong>
    <br/>
    <input type="time" class="tagsEntered"/>
</div>

The result I hope is something like this:

The solution can be in simple javascript, with jQuery, or even with Bootstrap.

Answer 1

There are several ways to implement this. My solution is the following:

• Add a class linhaX in each input, where X is the line number.
• Add a button on each row identified with a class repeat. The button has an attribute data-source which is the line from which the data to be copied comes, and data-target, which is the target line of the copy.
• The logic of the JS is basically the following: for each input of source, copy the value to the corresponding in target (which has the same index).

$(document).ready(function(){
  $('.repeat').click(function(){
    var target = $('.' + $(this).data('target'));
    $('.' + $(this).data('source')).each(function(index, value){
      target.eq(index).val($(this).val());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="Cseg2" class="hora">Linha 1:</label>
<label for="Cseg3">Entrada:</label>
<input type="time" id="Cseg3" name="Tsegs" class="linha1">
<label for="Cseg4">Saída:</label>
<input type="time" id="Cseg4" name="Tsegss" class="linha1">
<label for="Cseg5">Retorno:</label>
<input type="time" id="Cseg5" name="Tsegsss" class="linha1">
<label for="Cseg6">Saída:</label>
<input type="time" id="Cseg6" name="Tsegssss" class="linha1">
<br>
<label id="Cter2" class="hora">Linha 2:</label>
<label for="Cter3">Entrada:</label>
<input type="time" id="Cter3" name="Tter" class="linha2">
<label for="Cter4">Saída:</label>
<input type="time" id="Cter4" name="Tters" class="linha2">
<label for="Cter5">Retorno:</label>
<input type="time" id="Cter5" name="Tterss" class="linha2">
<label for="Cter6">Saída:</label>
<input type="time" id="Cter6" name="Ttersss" class="linha2">
<button type="button" class="repeat" data-source="linha1" data-target="linha2">Repetir linha anterior</button>
<br>
<label id="Cqua2" class="hora">Linha 3:</label>
<label for="Cqua3">Entrada:</label>
<input type="time" id="Cqua3" name="Tqua" class="linha3">
<label for="Cqua4">Saída:</label>
<input type="time" id="Cqua4" name="Tquas" class="linha3">
<label for="Cqua5">Retorno:</label>
<input type="time" id="Cqua5" name="Tquass" class="linha3">
<label for="Cqua6">Saída:</label>
<input type="time" id="Cqua6" name="Tquasss" class="linha3">
<button type="button" class="repeat" data-source="linha2" data-target="linha3">Repetir linha anterior</button>